Passing custom props to router component in react-router v4

You can pass props to the component by making use of the render prop to the Route and thus inlining your component definition. According to the DOCS:

This allows for convenient inline rendering and wrapping without the
undesired remounting explained above.Instead of having a new React
element created for you using the component prop, you can pass in a
function to be called when the location matches. The render prop
receives all the same route props as the component render prop

So you can pass the prop to component like

 <Route path="https://stackoverflow.com/" exact render={(props) => (<Home test="hi" {...props}/>)} />

and then you can access it like

this.props.test 

in your Home component

P.S. Also make sure that you are passing {...props} so that the
default router props like location, history, match etc are also getting passed on to the Home component
otherwise the only prop that is getting passed down to it is test.

Leave a Comment