When to use `useRouter` vs importing router instance
As far as I can tell there's not a clear reason in the docs to prefer one or the other.
This discussion mentions importing when using the hook can't be done, but it also suggests
The docs on the other hand call out that importing the router everywhere can lead to increased bundle size: https://tanstack.com/router/latest/docs/framework/react/decisions-on-dx#2-declaring-the-router-instance-for-type-inference
The
Is there some advantage beyond bundle size concerns to using the hook instead of importing? Maybe other parts than the
This discussion mentions importing when using the hook can't be done, but it also suggests
InnerWrap as a workaround: https://github.com/TanStack/router/discussions/2978The docs on the other hand call out that importing the router everywhere can lead to increased bundle size: https://tanstack.com/router/latest/docs/framework/react/decisions-on-dx#2-declaring-the-router-instance-for-type-inference
The
useRouter gets the current instance of the Router from context according to the docs, but importantly router.state isn't reactive: https://tanstack.com/router/latest/docs/framework/react/api/router/useRouterHookIs there some advantage beyond bundle size concerns to using the hook instead of importing? Maybe other parts than the
router.state are reactive using the hook and not the import?GitHub
I am creating an authenticated route using the TanStack Router documentation. According to the docs, I need to create an inner component like this: function InnerApp() { const auth = useAuth(); ret...
The useRouter method is a hook that returns the current instance of from context. This hook is useful for accessing the router instance in a component. useRouter returns The current instance. 
r...
r...
When people first start using TanStack Router, they often have a lot of questions that revolve around the following themes: Why do I have to do things this way? Why is it done this way? and not that w...
