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

Question

I am using the following simple nav code

Answer 1

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 2

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