How to pass props to react-router 4 components?

Question

Id like to use my app entry point as a global state store. Passing info down to children as props.

Using react-router 4, how can I send prop data down to the rendered components. In a similar fashion to this:

<Route Path=“/someplace” component={someComponent} extra-prop-data={dataPassedToSomeComponent} />

I’ve seen some janky workarounds for older versions of react-router, that appear to be deprecated.

What is the correct way of doing this in v4?

Answer 1

You can pass in a function to the render prop instead of passing in the component directly to the component prop.

<Route path="/someplace" render={() => <SomeComponent props={} />} />

You can read more here.

Answer 2

And to add to the above answer, if you want the routing properties accessible to the component you need to include those. Now when the router activates "SomeComponent", the component will get all the routing props plus the extra param(s) - in this example "param".

<Route path='/someplace' component={(props) => <SomeComponent param="yo" {...props}/>} />