useResolvedPath

useResolvedPath retrieves a signal<string>. It contains the current resolved path as defined in the Route.

const path = useResolvedPath(() => "");

// Parent Route path: /user/*
console.log(path()); // /user

const path = useResolvedPath(() => "a/b/c");

// Parent Route path: /user/*
console.log(path()); // /user/a/b/c

const path = useResolvedPath(() => "/a/b/c"); // Note: /

// Parent Route path: /user/*
console.log(path()); // a/b/c

Useful for making modular routers

const parentRoutePath = useResolvedPath(() => "");

return (
  <>
    <h1>Module component layer</h1>
    <Router base={parentRoutePath()}>
      {" "}
      // Modular magic
      <Route path="/" component={() => <div>Index</div>} />
      <Route path="/a" component={() => <div>AComponent</div>} />
    </Router>
  </>
);

Last updated: 3/10/26, 6:33 PMReport an issue with this page