React-router: React not rendering view when Link tag used inside redux

[themirror178]

After doing some researching, I found a similar issue regarding Redux's connect and {pure: false} workaround was fixed in react-router 3.0. I'm running react-router 4.0 (as part of react-router-dom) and still find this issue. https://github.com/reactjs/react-redux/issues/388

//bootstrap

ReactDOM.render(
    <Provider store={myStore}>
        <Router>
            <ConnectedMain />
        </Router>
    </Provider>, root_elem);

var ConnectedAdminMain = connect( mapStateToProps, null, null)(Main);

// Main

<div className="col-lg-12">
   <Route exact path="/" component={TestOne} />
      <Route path="/:id" component={ TestOneDetails} />
   </div>

// TestOne
Has <Link to="/foo">bar</Link>

Version

4.0.0
"react-redux": "^5.0.2",
"react-router-dom": "^4.0.0",

Test Case

Steps to reproduce

Expected Behavior

1. Link changes in URL

2. View re-renders

   Actual Behavior

3. Link changes in URL

4. View does not re-render
5. Refreshing the browser renders the correct view.

[pshrmn]

{ pure: false } would fix your issue. Otherwise, please see https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md (or if you want a longer read, you can check out this article I wrote that goes into some more detail about the problem).

[themirror178]

Is { pure: false } the solution, or the workaround? Apart from using HOCs or pathless routes, from your post.

[pshrmn]

Anything that allows for your connected component to update when the location changes would work. Passing a location prop means that sCU can still block updates when the location has not changed. Whether this is important will vary from project to project, but I would say don't feel obligated to turn off all update blocking just for React Router's sake.

[vovacodes]

What about the nested <Route> components? Are they prone to the same issue?

React.render(
  <Router>
      <Route path="/", render={({ match }) => <App matchUrl={match.url}>} />
  </Router>
)

class App extends PureComponent  {
  render() {
    const { matchUrl } = this.props;
    return (
       <div>
           <Link to={matchUrl} >Home</Link>
           <Link to={`${matchUrl}about`} >Home</Link>
           <Route exact path={matchUrl} render={() => <h1>Home Component</h1>} />
           <Route path={`${matchUrl}about`} render={({ location }) => <h1>About {location.url}</h1>} />
       </div>
    )
  }
}  

In other words, does it mean I always have to pierce all the shouldComponentUpdates between Routes as well?

[edwardfhsiao]

import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))

this does the trick. https://reacttraining.com/react-router/web/guides/redux-integration

[HeNKiEeEeE]

withRouter() works, but you have to put it on the right component. For me that was the child of the <Router> component.
Too bad none of the solutions mentioned on which component you had to put the "withRouter()" nonsense