Top level updates being blocked - with solution

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

[Vinlock]

Thank you so much!!! This helped me solve my issue!

[timdorr]

#5901