pass props to outlet react router

Grieving Gharial answered on March 12, 2025 Popularity 1/10 Helpfulness 1/10

answer pass props to outlet react router

pass props to outlet react router

Comment

const Layout = () => (
  const [foo, setFoo] = React.useState();

  <div className="super-style">
    <h1>My super awesome layout container</h1>
    <Outlet context={[foo, setFoo]} /> // <-- pass context value
  </div>
);


<Routes>
  <Route element={<Layout />}>
    <Route path="..." element={<Component />} />
    ... other routes for outlet
  </Route>
</Routes>


import { useOutletContext } from 'react-router-dom';

const Component = () => {
  const [foo, setFoo] = useOutletContext(); // <-- access context value

  ...
};

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript outlet react-router

Link to this answer
Share Copy Link