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

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 not use Route or withRouter() outside a Router

I also try using Link instead of NavLink but got error too(You should not use Link outside a Router)

Someone help me please.

navigationBar.js

import React, { Component } from 'react';
import { NavigationContainer, NavItem } from './navigationBar.style';

class NavigationBar extends Component {
  render() {
    return (
      <NavigationContainer>
        <NavItem to="/">Home</NavItem>
        <NavItem to="/projects">Project</NavItem>
      </NavigationContainer>
    );
  }
}

export default NavigationBar;

navigationBar.style.js

import styled from 'styled-components';
import { Flex, Div } from 'theme/grid';
import { NavLink } from 'react-router-dom';

export const NavigationContainer = styled(Flex)`
  position: fixed;
  right: 20px;
  top: 0.5em;
  font-size: 1em;  
`;
export const NavItem = styled(NavLink)`
  position: relative;
  padding-left: 10px;
  cursor: pointer;
`;

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 whatever
render() {
  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:

<code>

{
//...
"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:

<code>

{
//...
"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

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/