Link Options exact: true does not accept searchParams | TanStack | Page 1

nova hinge Jul 6, 2025, 10:02 AM

#

Hi Guys

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

/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
        }
      },

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

wheat plaza Jul 6, 2025, 10:08 AM

#

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

nova hinge Jul 6, 2025, 10:28 AM

#

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

wheat plaza Jul 6, 2025, 11:25 AM

#

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?

nova hinge Jul 6, 2025, 12:01 PM

#

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

wheat plaza Jul 6, 2025, 12:07 PM

#

you need includeSearch: false as the default is true

#Link Options exact: true does not accept searchParams