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.

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
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.

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.

Before you leave

I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?

We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 84,226 subscribers and an almost 50% weekly open rate later, it looks like we did it.

Delivered to 84,226 developers every Monday

Avatar for Tyler McGinnis

Tyler McGinnis

CEO of Obsessed with teaching, writing, swimming, biking, and running.

Share this post

Want more react-router?

This is part of our React Router course. You can take the rest of the course by starting a free 3-day trial.