router
router copied to clipboard
Rendering routes server side with `react-location-lite`
Describe the bug I've been trying react location lite in an SSR setup and hit a minor hurdle which I think is a bug.
Routes do not render on the server, the <Outlet />
simply renders null
and the outlet renders client side. It looks like this is simply a result of this hook not executing on the server:
https://github.com/TanStack/react-location/blob/04abfd6e3b827d818e4444c867092ca93a2e06ee/packages/react-location-lite-experimental/src/index.tsx#L463-L478
It would be necessary to pass the initial path into the ReactLocation instance on the server to make this work, I haven't seen docs on this but something like this is possible:
new ReactLocation({
history: createMemoryHistory({
initialEntries: [new URL(request.url).pathname],
initialIndex: 0,
}),
}),
But I also wonder if there could be a simpler API for this that didn't involve invoking createMemoryHistory
manually?
I'm currently just doing something like this in App.tsx
to work around the issue:
const router = useRouter();
const [initialRoute] = matchRoutes(router, router.state.location);
return (
<Suspense fallback={null}>
{import.meta.env.SSR ? initialRoute.route.element : <Outlet />}
</Suspense>
);
I'm wondering if I've missed some obvious pitfall with what I've done, was there a reason this is the SSR behaviour?
Expected behavior Routes render on the sever and cleaner API for passing the route server side.
Desktop (please complete the following information):
- OS: mac
- Browser: chrome
- Version: 98