If using Redux, the redux connect HOC overrides the shouldComponentUpdate lifecycle method on your component and checks for props and state change this can confuse the React Router. Something like a user clicking a link will not necessarily change the state or props as is, leading to not re-rendering the components in the routeing context.

The documentation for react router states a solution for this problem:

Wrap the component with the withRouter HOC

    import { Route, Switch, withRouter } from 'react-router-dom';
    import { connect } from 'react-redux';

    const Main = (props) => (
        <Route exact path='/' component={SAMPLE_HOME}/>
        <Route path='/dashboard' component={SAMPLE_DASHBOARD}/>    
    export default withRouter(connect()(Main))  

Also, as an enclosing route component will pass props with a location property, you can pass that into the child component and that should achieve the desired behaviour.


I think the problem here is with redux .. because it blocks rerendering the components as long as the props didn't change,

This is because connect() implements shouldComponentUpdate by default, assuming that your component will produce the same results given the same props and state.

The best solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.

If that’s not practical for whatever reason (for example, if you’re using a library that depends heavily on React context), you may pass the pure: false option to connect():

function mapStateToProps(state) {
  return { todos: state.todos }

export default connect(mapStateToProps, null, null, {
  pure: false

here are links for more explanation:

react-redux troubleshooting section

react-router DOCS

Related Query

More Query from same tag