Redux connect "blocks" navigation with react-router-redux

Question

In an application using react, redux and react-router, I'm using react-router-redux to issue navigation actions. I found that wrapping routes in a component with connect blocks navigation.

I made a sample with CodeSandbox that illustrates the issue: sample.

As is, the navigation doesn't work. However, if in ./components/Routes.jsx, this line:

export default connect(() => ({}), () => ({}))(Routes);

Is replaced by:

export default Routes;

It works.

Any idea how I could use connect in a component that wraps routes without breaking navigation?

Answer 1

See the troubleshooting section in react-redux docs.

If you change Routes.jsx export to:

export default connect(() => ({}), () => ({}), null, { pure: false })(Routes);

it will work.

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

route changes, but props don't so the view doesn't update.

You could achieve same with withRouter hoc.