Thursday, August 15, 2019

Error: Invariant failed: You should not use Link outside a Router

As of the time of this writing, the latest version for connected-react-router is 6.5.2, and the latest version for react-router and react-router-dom is 5.0.1. However, I got the errors that says Link should not be used outside a Router when using those versions.

Cause of the error:

The example of connected-react-router (even if the latest version is 6.5.2) uses connected-react-router 6.0.0 though:

That example uses react-router and react-router-dom 4.3.1.

To fix the error, just use the same version from the example. Pin the version of connected-react-router to 6.0.0, and both react-router, react-router-dom to ^4.3.1.

"dependencies": {
    "connected-react-router": "6.0.0",
    "history": "^4.9.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.1.1",
    "redux": "^4.0.4"

Then delete yarn.lock and node_modules:
$ rm yarn.lock
$ rm -rf node_modules

Then reinstall:
$ yarn

Then add prop-types:
$ yarn add prop-types

As of the time of this writing, I got ^15.7.2 for prop-types.

That's all.

No comments:

Post a Comment