Description
Version
4.2.2 react-router-dom (current unpkg latest)
Test Case
Broken: https://jsfiddle.net/samsch/1ghyyxx9/4/
Expected: https://jsfiddle.net/samsch/1ghyyxx9/5/
Steps to reproduce
Clicking links should cause routes to re-render, and the path should be redirected on load.
Expected Behavior
Regular ol' routing. Route ""
should always show, and Route /
should show initially after immediate redirect. Click on To /
and Route /
should show, click To /r1
and Route /r1
should show.
Actual Behavior
In the broken fiddle, no navigation updates occur at all after initial render.
The Problem
Passing a unique prop to the PureComponent (as outlined by Dealing with Update Blocking) doesn't work because App doesn't re-render and the children passed to BrowserRouter
aren't updated. Context is updated in the working fiddle because context doesn't need render to run to trigger componentWillReceiveProps.
Basically, using React Router this way doesn't work without extra non-obvious pieces (wrapping the children of BrowserRouter in a withRouter component, or forcing App
to re-render somehow) show in The Solution.
I think the docs fail to address this potential problem, and the usage examples point to passing (effectively) static children to BrowserRoute
.
The Solution
https://jsfiddle.net/samsch/1ghyyxx9/6/
The children of BrowserRouter need to be wrapped in something that will re-render when routing is updated (withRouter).
Feature Request
A docs reference to this problem in Dealing with Update Blocking could be helpful, and could point at the solution above, or:
Could a render prop option be added to the Router
component? It doesn't even need to pass any props (though it could pass the router/location). So instead of
const RouterRenderer = withRouter(props => props.render());
...
<Router>
<RouterRenderer render={() => ...children...} />
</Router>
It would be just
<Router render={() => ...children...} />
Real World
My real world case isn't a PureComponent, but Redux connect()ed components which are part of the layout tree above and around routing components. https://gist.github.com/samsch/8a7f818e72bbad9079da0f67a8619434