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

问题

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.

回答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.

回答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.

回答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.

回答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.

来源：https://stackoverflow.com/questions/43895805/react-router-4-does-not-update-view-on-link-but-does-on-refresh