Skip to content

How to pass props to a child component via React Router

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'} />} />

→ Here's my latest YouTube video

→ Get my React Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list