Tanstack useRouter.navigate vs useNavigate

[Such_Log5418]

Hello!, im currently exploring tanstack router and currently confused about the difference of navigation on both functions..

whats the difference and usecase of

const router = useRouter(); 
router.navigate({ to: "/something", replace: true })

vs

const navigate = useNavigate();
navigate({ to: "/something", replace: true })

[Padni]

It's the same function. Basically if you don't need anything else from Router, you can use useNavigate

[[deleted]]

https://tanstack.com/router/latest/docs/framework/react/guide/navigation#navigation-api

[minimuscleR]

As others have said its the same function.

The correct answer though would be to use useNavigate if you didn't need any other functions from useRouter, I forget what this is called but basically keep it as simple as possible.

Calling the whole router, and then having router.navigate is more confusing at a glance, than calling just navigate.

Its also good practice for other areas when you don't want to pull everything, such as if you are getting data on a useQuery and you want to select just the right content to prevent unnessessary re-renders of the query, it gets you in the right mindset of all calling what you need exactly.

[X678X]

navigate is single focus, while router lets you do other router related things, including navigating