How to pass props to a child component via React Router
New Course Coming Soon:
Get Really Good at Git
This short tutorial explains how to pass props to a child component via React Router
There are many solutions to pass props to a child component via React Router, and some you’ll find are outdated.
The most simple ever 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 than 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'} />} />
→ Get my React Beginner's Handbook
→ Read my full
React Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X