React router 4 does not update view on link, but does on refresh

Question

I am using the following simple nav code

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>
</Router>

<NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

<NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

The URL changes but the view does not. It does however change when I refresh the page or manually go to that URL.

Answer 1

You can also use the:

import { withRouter } from 'react-router-dom';

And then on your export default, you do like this:

export default withRouter(connect(mapStateToProps, {})(Layout));

Because when you have an export connect, you need to tell that that component will be using the router.

Answer 2

This is because react-redux connect method implements shouldComponentUpdate which will cause component not to render when props didn't change. And this is conflicting now with react-router 4.

To avoid it you can pass {pure: false} to connect as described in react-redux troubleshooting section.

Another way is to use withRouter HOC or pass location prop like described in DOCS.

Answer 3

I had my Navlinks in a stateless-component (or dumb component) and a container to control the collapse-state of my navbar.

after switching the navbar-container from PureComponent to Componentit solved the problem for me.

Answer 4

I have encountered this problem. I resolve it by add attribute key to component Switch with value is a location pathname and location search.