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 thecomponent
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="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 likelocation, history, match etc
are also getting passed on to theHome
component
otherwise the only prop that is getting passed down to it istest
.