Broken react-router v3 interop with react-redux v7

[krvajal]

Version

This bug was found in react-router v3, but not sure if this version is still been supported.

The issue

I recently upgrade react-redux to v7.0.3 and had the unpleasant surprise to find that it breaks with react-router. Here is a CodeSandbox that shows the problem https://codesandbox.io/s/reduxv7reactrouterbug-yb1md

After debugging it a little bit found that the error is thrown by React here https://github.com/ReactTraining/react-router/blob/v3/modules/RouterContext.js#L84, after successfully passing the condition on https://github.com/ReactTraining/react-router/blob/v3/modules/RouterContext.js#L76.
It turns out, according to @markerikson,

as of React-Redux v7, connect() uses React.memo(), which actually returns a special object as a component type rather than a function.

reduxjs/react-redux#1300 (comment)

The fix should be an easy one IMO, and I can send a PR is needed but would like to know first if v3 is still been supported. I can't afford a rewrite right now.

[timdorr]

Yeah, we can still push out a v3 update. As long as it's not a breaking change, we're all good. Feel free to submit a PR.

[mouhsinelonly]

@krvajal can you post your solution, i have faced the same problem

[arthur791004]

@mouhsinelonly there maybe some workaround before next version of react-router v3 🤣The key point is that your route cannot directly use React.lazy, React.memo and etc. Therefore you could do one of following:

1. wrap your component directly used by react-router to be functional component. eg. create your connect component which wrap the connect of react-redux or create your Route component to prevent this case.
2. use useSelector rather than connect from react-redux

[mouhsinelonly]

@arthur791004 i know v4 and v5 are out but i have a huge code base and it will be no easy task to move it all to a new version, and i still want to use React.lazy and React.memo, maybe @krvajal has a better way

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.