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

Make sure you wrap the main react render code in the Router. For example, with react-dom you need to wrap the app in Browser-Router. If this is a Udacity project, this is typically the index.js file.

import { BrowserRouter } from 'react-router-dom';ReactDOM.render(   <BrowserRouter>     <App />   </BrowserRouter>  , document.getElementById('root'));

Well you're using a NavLink outside of the BrowserRouter/HashRouter (whatever you're using)

You said it yourself

You should not use Link outside a Router

Make sure that you have the structure like this

// App render or whateverrender() {  return (    <BrowserRouter>       <NavigationBar />       {`whatever else you doin'`}    </BrowserRouter>  );}

You must always render them inside a Router

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