metropolitan-bronze

Link Options exact: true does not accept searchParams

Hi Guys I am not sure if I overlooked something, but I have following structure

/members
/members/approval
/members/templates

/members
/members/approval
/members/templates

in my left side navigation I want to show an active state of eiter of the three routes (its a tab navigation) For my tab navigation I apply:

{
        label: t("members"),
        to: "/members",
        activeOptions: {
          exact: true,
          includeSearch: true
        }
      },

{
        label: t("members"),
        to: "/members",
        activeOptions: {
          exact: true,
          includeSearch: true
        }
      },

This does not work, the active state is lost as soon some search params are present. Is it not possible to have exact: true but in the same time accept search params? Thanks

6 Replies

continuing-cyan•2mo ago

can you please provide a complete minimal example by forking one of the existing router examples on stackblitz?

metropolitan-bronzeOP•2mo ago

https://stackblitz.com/edit/tanstack-router-faexmgdt?file=src%2Froutes%2Findex.tsx,src%2Froutes%2F__root.tsx&preset=node very simple reproduction - i did not log in do you see it? basically as soon you type into the search input the "Home" looses its active class which is what I would like to preserve while searching Sorry this is a router-question not a start question I think I posted in wrong channel

continuing-cyan•2mo ago

if you use exact:true with includeSearch and not specify search then of course it's not active when you add search params so just don't use includeSearch then?

metropolitan-bronzeOP•2mo ago

It does not matter what activeOptions I set, as soon exact:true is present the active state is lost when a search param is triggered. But the state is still home so I want to still highlight "Home" I extend the example with validateSearch prop on route just to make sure to have the reproduction complete

continuing-cyan•2mo ago

you need includeSearch: false as the default is true

metropolitan-bronzeOP•2mo ago

oh man - you are right I misread the type description include: false is the trick! Thanks so much for clarifying it

Gaming

Programming

Link Options exact: true does not accept searchParams

Did you find this page helpful?