How to pass props to a child component via React Router

There are many solutions, 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'} />} />

Want to hire me?

I'm currently considering remote job/contract opportunities as a Frontend Developer.

Read more about me and if you're interested, get in touch.