Passing custom props to router component in react-router v4
Solution 1:
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 thelocation
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="/" 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 likelocation, history, match etc
are also getting passed on to theHome
component otherwise the only prop that is getting passed down to it istest
.