TanStack•2y ago•

1 reply

dual-salmon

Link active prop with param

Hello I have a problem with

activeProps

activeProps

prop in

Link

Link

component and a route with a param. I have implemented a

TabsRoute

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

categories

. When i navigate to another tab for e.g

products

products

the

Settings

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?

TanStack•2y ago•

1 reply

dual-salmon

Link active prop with param

Hello I have a problem with

activeProps

activeProps

prop in

Link

Link

component and a route with a param. I have implemented a

TabsRoute

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

categories

. When i navigate to another tab for e.g

products

products

the

Settings

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?

Link active prop with param

Similar Threads

Link active prop with param

Similar Threads

Similar Threads

Similar Threads