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
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!
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
componentuseRouteContextIf 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!
