Get params from outside of route component in React Router 6

Question

I have created 2 components named Layout and Homepage. Then I have added Layout in return and implement 2 route inside it with Homepage component. Now am trying to get params by useParams hook inside Layout component while I am in the location of /10. Is it possible? It is giving blank in my side.

App.js

const App = () => {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/:id" element={<Homepage />} />
      </Routes>
    </Layout>
  );
}

Layout.js

import { useParams } from "react-router-dom";

const Layout = () => {
  const params = useParams();
  console.log(params);
  return(
    <div>
      Hello World
    </div>
  );
}

Are you currently on an "/someIdValue" path for there to be a route param to pick up? — Drew Reese, Nov 23 '21 at 19:45
Yeah. Now I am in `/10`. But getting blank object in `param` — Abdullah Al Shahariar, Nov 23 '21 at 19:51
If `App.js` is the root component of your app, you are missing a `Router` object (`BrowserRouter`, `HashRouter` etc) above `Layout` — Bar, Nov 23 '21 at 20:02
@ColdAtNight If there were no `Router` then there'd be errors trying to use the `useParams` hook and rendering routes. — Drew Reese, Nov 23 '21 at 20:03
I've `Index.js` as the root component in my app, where I have wrapped `App.js` component by `BrouserRouter`. — Abdullah Al Shahariar, Nov 26 '21 at 09:02

Drew Reese · Accepted Answer · 2022-09-11T17:39:46.040

3

Issue

The Layout component is rendered outside the Routes component that manages the route matching and route params it renders.

Solution

The common pattern for rendering layouts is to render the layout component into a route and have the layout render an Outlet for its nested routes to be rendered out on.

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

Routes

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

edited Sep 11 '22 at 17:39

answered Nov 23 '21 at 21:10

Drew Reese

165,259
14
153
181

Is there a similar solution for version 5 ? – Oleksandr Fomin Feb 04 '23 at 07:03
@OleksandrFomin What do you need a solution for in RRDv5? – Drew Reese Feb 04 '23 at 07:16
I need to access URL params from outside the route in a layout component – Oleksandr Fomin Feb 04 '23 at 07:48
@OleksandrFomin Would the [useRouteMatch](https://v5.reactrouter.com/web/api/Hooks/useroutematch) be helpful then? If not, then it may be for the best that you post an entirely new question on SO with supporting [mcve]. If you do this then please feel free to ping me in another comment here with a link to it and I can take a look when available. – Drew Reese Feb 04 '23 at 07:51

Get params from outside of route component in React Router 6

1 Answers1

Issue

Solution