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