Check your version

This post assumes you're using React Router v6. If not, find your version below.

React Router uses a declarative, component-based approach to routing. What that means is when you want to create a new route, you render a Route component. Route allows you to map URL paths to different React components. For example, say we wanted to render a Dashboard component whenever a user navigates to the /dashboard path. To do that, we'd render a Route that looked like this.

<Route path="/dashboard" element={<Dashboard />} />

Now, what if we also wanted to pass the Dashboard component a prop?

In previous versions of React Router (v4), this was non-trivial since React Router was in charge of creating the React element. To get around this, you'd have to use Routes render prop.

// React Router v4
<Route
  path="/dashboard"
  render={(props) => <Dashboard {...props} authed={true} />}
/>

However, with React Router v6, since you're in charge of creating the element, you just pass a prop to the component as you normally would.

<Route path="/dashboard" element={<Dashboard authed={true} />} />

Want to learn more?

If you liked this post and want to learn more, check out our free Comprehensive Guide to React Router.