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
InnerWrap as a workaround: https://github.com/TanStack/router/discussions/2978
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 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/useRouterHook
Is 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
Warning: useRouter must be used inside a <RouterProvider> component...
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...
useRouter hook | TanStack Router React Docs
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...
Decisions on Developer Experience | TanStack Router React Docs
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...
0 Replies