How to Provide Dynamic Custom Props to React Router 6.4+ Route

hanneswidrig 0
Viewed 24

I'm trying to provide dynamic custom props to a React Router Route definition using the newest React Router 6.4. I can't find any examples to showcase how I can accomplish this. These would be props that are provided from the parent component of the RouterProvider declaration.

An example from official documentation for 6.0 - 6.3:

// Ah, nice and simple API. And it's just like the <Suspense> API!
// Nothing more to learn here.
<Route path=":userId" element={<Profile />} />

// But wait, how do I pass custom props to the <Profile>
// element? Oh ya, it's just an element. Easy.
<Route path=":userId" element={<Profile animate={true} />} />

In 6.4, your route definition looks like something like:

// How do I provide animate state from App component to Policy component?
const router = createBrowserRouter([{ path: '/', element: <Profile animate={animate} /> }];

export function App() {
    const [animate, setAnimate] = useState(true);
    return <RouterProvider router={router} />
}
react-router-dom react-router reactjs javascript
1 Answers

In the example you provided you are already passing an animate prop to the routed component. RRDv6.4.0 didn't change the Route component API. It seems your question is really rather about passing a dynamic prop value when the route is accessed.

Move the router declaration into the App component so the animate state is in scope.

Example:

function App() {
  const [animate, setAnimate] = useState(true);

  const router = createBrowserRouter([
    { path: "/", element: <Profile animate={animate} /> } // <-- pass prop value
  ]);

  return (
    <div className="App">
      ...
      <RouterProvider router={router} />
    </div>
  );
}

Edit how-to-provide-custom-props-to-react-router-6-4-route

Drew Reese0
Related