NavLink migration from react-router

[devinrhode2]

We are using tanstack router for a new project.

It is a totally separate vite app, on a new subdomain, but the header will be the same as our current platform.

Our current platform uses react-router.

We are going to share code via git submodules, so that we retain seamless hot reloading when the shared code changes. (happy to discuss submodule vs npm more in a different thread)

First challenge we are facing is with NavLink.

Would anyone be willing to share their implementation of a tanstack NavLink?

[SeanCassiere]

TanStack Router has its own <Link> component: https://tanstack.com/router/latest/docs/framework/react/api/router/linkComponent

• Plus a guide on using Custom interfaces as a "link" for navigation: https://tanstack.com/router/latest/docs/framework/react/guide/custom-link

[devinrhode2]

how do I take a relative path from the "to" prop and resolve it to the absolute path?

All Im trying to do is re-create the react-router-dom className={({isActive})=> callback.

[devinrhode2]

in my case i only happen to need to base path

I suppose i could resolve it manually, but im sure theres a util in router already

[SeanCassiere]

I'm not sure that I fully understand what your basepath situation is.

In TanStack Router, once you've configured your basepath on the router instance, it then automatically resolves your to pathname with the basepath value with what you've configured.
So, if you've configured your basepath as /app and set the to value to /dashboard on the <Link> component, then when clicked it gets resolved to /app/dashboard in the URL bar.

Edit: But if you need the basepath value (that's not for navigation purposes, i.e. application logic reasons), you can always get it off of useRouter().basepath.

---

For styling, you have the className attr, as well as options for activeProps and inactiveProps which also accept the className attr in there. See the example here:

router/examples/react/basic-file-based/src/routes/__root.tsx

Lines 30 to 37 in a42deba

	<Link
	to="/posts"
	activeProps={{
	className: 'font-bold',
	}}
	>
	Posts
	</Link>{' '}

Edit: Your CSS selectors could also target data-attributes as well.

router/packages/react-router/src/link.tsx

Lines 847 to 848 in a42deba

	...(isActive && { 'data-status': 'active', 'aria-current': 'page' }),
	...(isTransitioning && { 'data-transitioning': 'transitioning' }),