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 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;
`;

score 73 · Answer 1 · edited Apr 04 '19 at 18:02

73

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

edited Apr 04 '19 at 18:02

pihentagy

5,975
9
39
58

answered May 07 '18 at 16:06

Bruce Seymour

1,520
16
24

score 15 · Answer 2 · answered Nov 15 '17 at 18:25

15

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

answered Nov 15 '17 at 18:25

João Cunha

9,929
4
40
61

2

Thanks a lot! your answer worked after changing to
. In my code, where was in . I'm getting better. Thanks again!
– JongHun Lee Nov 15 '17 at 20:05
Router may have only one child element – Muhammad Umer Jul 23 '18 at 14:59
@MuhammadUmer I know. But i'm just demonstrating that he should encapsulate his components inside the Router – João Cunha Jul 23 '18 at 15:27
1

you saved my day – Molly Feb 08 '19 at 10:06

Marbin274 · Answer 3 · 2020-07-09T05:30:46.123

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

score 0 · Answer 4 · answered Oct 15 '20 at 16:51

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.

score 0 · Answer 5 · answered May 18 '21 at 22:03

0

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>

answered May 18 '21 at 22:03

Tri Mueri Sandes

129
1
6

score 0 · Answer 6 · answered Jul 14 '21 at 11:12

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/

score -1 · Answer 7 · answered Apr 10 '20 at 15:11

-1

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

answered Apr 10 '20 at 15:11

Dinesh Khetarpal

363
3
5

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

7 Answers7

Linked