Get params from outside of route component in React Router 6

user_8405984 0
Viewed 828

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>
  );
}
react-router-dom react-router reactjs javascript
1 Answers

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>

Edit get-params-from-outside-of-route-component-in-react-router-6

user_86908570
Related