AI Workshop: learn to build apps with AI →
Routing: How to pass props to a child component via React Router

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


There are many solutions to pass props to a child component via React Router, and some you’ll find are outdated.

The simplest approach is adding the props to the Route wrapper component:

const Index = props => <h1>{props.route.something}</h1>

var routes = <Route path="/" something={'here'} component={Index} />

But in this way you need to modify how you access props, via this.props.route.* instead of the usual this.props, which might or might not be acceptable.

A way to fix this is to use:

const Index = props => (
  <h1>{props.something}</h1>
)

<Route path="/" render={() => <Index something={'here'} />} />

Lessons in this unit:

0: Introduction
1: Introduction to React Router
2: React Router, how to get data from a dynamic route
3: ▶︎ How to pass props to a child component via React Router
4: The Reach Router Tutorial
5: React Router, why useLocation and useHistory might return undefined