modus ponens modus ponens - 1 year ago 75
React JSX Question

threading route params with react-router and redux container components

Hopefully this is a simple question that I'm just having trouble phrasing.
Prior to using react-router:

My app is structured in a way that there is a list of items, clicking an item sets a

state item in my redux store.

When an item is selected, app renders a container component. This component is quite complex and has several other child container components where I use a selector to

Now that is fine, but when switching to
, now the only component with knowledge of the
value is the most parent component which gets the
value. Because
is no longer being stored in the state, it is managed by the router, is it necessary for me to thread the
value through to all the children container components as well? Where i would now use a selector like
getItem(state, selected)
or something to that effect.

Hopefully that's clear, perhaps i should have been threading that value through all along? Not sure on best practice there. Thanks.

Answer Source

You need to pass location/pathname/params explicitly as props to child components.

react-router currently provides context.router which will help you navigate forward and backward but it doesn't give you the details of the current route. In earlier versions, there used to be context.location and context.router.getCurrentRoutes but they were both deprecated in v2.0.0-rc4.

Changed context exports

Only an object named router is added to context. Accessing context.history, context.location, and context.route are all deprecated.

Accessing location

Access location from this.props.location of your route component. If you'd like to get it deeper in the tree, you can use whatever conventions your app has for getting props from high down low. One option is to put it context yourself

For further details, refer the react-router changes done during v2.0.0-rc4.