SolidJS•12mo ago

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•12mo 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•12mo ago

useParams depends on the parent Route, so yeah manually parsing useLocation or useMatch is also a good option

Gaming

Programming

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