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

I uninstalled @types/react-router-dom and installed it back. The error went away, don't know the magic but it worked for me.

This may be a result of some confusions in node_modules for multirepo projects with some integration approaches.

The simplest way to avoid problems is to keep only one node_modules folder for all projects integrated together in one application. Otherwise some subproject can use different versions of same library (as example React or Router etc) which can be not compatible with each other in internal data structs (react contexts and so on) and that brings problems like this.

this is solved when you use <Router>, just add outside </Router></AppProvider>

<BrowserRouter>
    <Switch>
        //sample route
        <Route path="/index" render={(props) => <Index {...props} />} />
    </Switch>
</BrowserRouter>

One possible issue is using 'React Router DOM' and 'React Router' simultaneously in package.json.

They are technically three different packages: React Router, React Router DOM, and React Router Native. The primary difference between them lies in their usage. React Router DOM is for web applications and React Router Native is for mobile applications made with React Native

https://www.freecodecamp.org/news/react-router-cheatsheet/

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

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 whatever
render() {
  return (
    <BrowserRouter>
       <NavigationBar />
       {`whatever else you doin'`}
    </BrowserRouter>
  );
}

You must always render them inside a Router

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'));