Make navigate a top-level export or available via simpler hook

[MarkLyck]

I have a bunch of components that don't really need any router "state". But they do need to programmatically navigate to another route.

Having to import both useMatch from the router and the route so I can do const { navigate } = useMatch(myRoute.id) is a bit much.

Ideally it would be great if I can just import navigate directly from the package import { navigate } from '@tanstack/react-router'. But I can see how that won't work for cases where there might be multiple routers.

As a second option I would like to have a simpler useNavigate() hook that works the same as react-router-dom.

import { useNavigate } from '@tanstack/react-router
const navigate = useNavigate()

[ryanstaniforth]

You should only need to import your router instance. You can then use router.navigate('/your/route');. In this example, '/your/route' is type safe, just make sure you include the following where you define your routes:

declare module '@tanstack/react-router' {
  interface RegisterRouter {
    router: typeof router;
  }
}

Does this help?

[tannerlinsley]

Also remember that any global or contextual router import will not have type safety for relative navigations. Which is why getting the function off of the match is nice. It has the relative type safety. Tanner Linsley

…

On Nov 21, 2022 at 1:49 PM -0700, Ryan Staniforth ***@***.***>, wrote: You should only need to import your router instance. You can then use router.navigate('/your/route'); '/your/route' in this example is type safe, just make sure you include the following where you define your routes: declare module ***@***.***/react-router' { interface RegisterRouter { router: typeof router; } } Does this help? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>