How to get `useParams` in the "root.tsx" in a server-rendered-page.

Inside the root.tsx before any FileRoutes are resolved, how can we get the full path / the params for the current html-request? When I use useParams().id inside the root.tsx, I always get undefined.
2 Replies
Bersaelor
Bersaelor13mo ago
So, useLocation seems to show the correct result on the server:
export default function Root() {
const location = useLocation();
const id = () => {
const pathComponents = location.pathname.split('/');
if (pathComponents.length < 3) {
return undefined;
}
return pathComponents[2];
};
const data = serverData(id());
// ...
export default function Root() {
const location = useLocation();
const id = () => {
const pathComponents = location.pathname.split('/');
if (pathComponents.length < 3) {
return undefined;
}
return pathComponents[2];
};
const data = serverData(id());
// ...
mdynnl
mdynnl13mo ago
useParams depends on the parent Route, so yeah manually parsing useLocation or useMatch is also a good option