TanStack Router's Link accepts an activeProps prop that gets spread onto the rendered element only when the link matches the current route — including className. So styling the active item in a navbar is just <Link activeProps={{ className: 'text-black' }}> — no useMatches, no manual pathname comparison.
The full post has a short MainNav example mapping menu items to Links plus a pointer to TanStack's docs for the rest of the active-state knobs.
Originally published at andreasbergstrom.dev — read the full post there.
Top comments (2)
I am not sure this works anymore, but I kinda like the idea. It's too bad there are not examples of how to generate a nav based on your routes. Then again, it seems like its silly to have to manually build your nav. It's too easy to forget to add a link to your array of objects and you have to maintain in two places. There should be an easier way to do this.
Yeah it's really lame this is such a problem