Detach component from route declaration, typescript vs vite
I've been trying Tanstack router for a couple of weeks now, and I'm not sure how to approach the route definitions.
I started having the component inside the route definition because that's what I saw in the react-query example. But I realised that the page was doing a full reload every time I saved a file, after some research I found this issue https://github.com/TanStack/router/issues/510#issuecomment-1464898679. Basically the vite react plugin will hot reaload only when exporting react components (more info in https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#consistent-components-exports).
So I decided to refactor the app and keep the route definition in one file and the component in a different one, but now I am facing a different problem, before, the
component function in the route definition gave me the useRouteContext, and different hooks as props, and now I don't have that.
If I import them from the library itself, the types doesn't work, it only gets the rootRoute types.
How can I fix that? Is there a better way to approach this?
I made a reproduction in Codesandbox where you can see the problem. You can check it out here https://codesandbox.io/p/devbox/white-brook-62wyk5?file=%2Fsrc%2FApp.tsx%3A66%2C1
Thanks in advance!2 Replies
fair-rose•3y ago
I remember there was some type helper, something like
RouteProps that allowed you to type those props. Howoever, I personally recommend different approach. You can just import the route declaration and it has properties with corresponding hooks. E.g.
Route declaration:
Component consuming e.g. search params
rare-sapphireOP•3y ago
But that would cause circular dependencies right? 🤔
Nevermind, I just tried it and it works 👏