T
TanStack•15mo ago
noble-gold

Link active prop with param

Hello I have a problem with activeProps prop in Link component and a route with a param. I have implemented a TabsRoute component. I have a sidebar with all the routes for example: 
export const SIDEBAR_ITEMS: SidebarItem[] = [
   {
        title: 'settings',
        icon: (
          <Settings
            size={20}
            color='#F7EDFF'
            // strokeWidth={2.5}
          />
        ),
        linkOptions: {
          to: '/settings/$tab',
          params: {
            tab: 'categories',
          },
        },
      },
....]
export const SIDEBAR_ITEMS: SidebarItem[] = [
   {
        title: 'settings',
        icon: (
          <Settings
            size={20}
            color='#F7EDFF'
            // strokeWidth={2.5}
          />
        ),
        linkOptions: {
          to: '/settings/$tab',
          params: {
            tab: 'categories',
          },
        },
      },
....]
The initial tab -> param is the categories. When i navigate to another tab for e.g products the Settings item in the sidebar is not active in the sidebar menu. Maybe because it doesnt match this : 
to: '/settings/$tab',
          params: {
            tab: 'categories',
          }
to: '/settings/$tab',
          params: {
            tab: 'categories',
          }
How to deal with this?
1 Reply
ambitious-aqua
ambitious-aqua•15mo ago
please provide a minimal complete example by forking on of the existing examples on stackblitz

Did you find this page helpful?