How to pass props to child components through React Router

This short tutorial explains how to pass props to child components via React Router

There are many solutions to pass props to child components in the following waysReaction router, And you’ll find that some of them are outdated.

The easiest way ever is to add 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 the way to access the props in the following waysthis.props.route.*Instead of the usualthis.props, This may or may not be accepted.

One way to solve this problem is to use:

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

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

Download mine for freeResponse Handbook


More response tutorials: