You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react

Question

I\'m trying to build my first portfolio website and got stuck in routing using react-router-dom 4.2.2 and styled-components 2.2.3.

error message: You should

Answer 1

A possible origin is answered in spanish Stackoverflow, its a typescript project.

Original post: https://es.stackoverflow.com/a/372161/24877

According to the React documentation, this usually happens by having the React duplicated (more than one copy of React) https://reactjs.org/warnings/invalid-hook-call-warning.html

Apparently when using the npm link the application Try to use react from projects "react-app" and "react-app-components" and therefore when publishing it to the npm repository the error no longer comes out.

To fix it I removed the dependencies react, react-router-dom from the package.json and rerun npm install to remove the folders from node_modules.

package.json

Before:

    
{
  //...
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "babel-loader": "^8.1.0",
    "glob": "^7.1.6",
    "react": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "source-map-loader": "^1.0.1",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-router-dom": "^5.2.0"
  }
}

After:

    
{
  //...
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "babel-loader": "^8.1.0",
    "glob": "^7.1.6",
    "source-map-loader": "^1.0.1",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-router-dom": "^5.2.0"
  }
}

I just leave the "@types" to work with typescript