Active link highlighting?

[blitzbohne]

Hi,

I have a link with goes to the root "/" so I set activeProps={{exact:true}} to ensure it doesn't hit any other subroutes. However I also support subroutes on my root like "/dashboard" and of course the link doesn't highlight then. What's the proper solution to handle those special cases?

thanks
Alex

[StephenSHorton]

This may not be the answer, but you can determine active link state using your own expression.

const { location: { pathname } } = useRouterState()
const isActive = href.split('/')[1] === pathname.split('/')[1] // example matches '/foo' | '/foo/bar | '/foo/bar/1'

[ashishsurya]

@blitzbohne tanstack-router attaches a class active to all of the a tags if they are active, you can use that class as a selector and style your way

[WinglessFrame]

As @ashishsurya replied, the active class is applied. For those using Tailwind, you can use the [&.active]: className for styling. For example:
For example

className="[&.active]:text-green-500"

Also, you might face an issue where all matched routes are highlighted. In this case, you should pass the activeOptions={{ exact: true }} prop.

<Link
  className="[&.active]:text-green-500 flex items-center gap-1"
  activeOptions={{ exact: true }}
>
  Your link
</Link>