Invariant Violation: You should not use outside a

Question

I have a problem that I don't know how to solve, I get this error when running npm test

Invariant Violation: You should not use <Switch> outside a <Router>

What can the problem be and how can I solve it? The test I run is the standard app.test.js that comes with react

class App extends Component {
  render() {
    return (
      <div className = 'app'>
        <nav>
          <ul>
            <li><Link exact activeClassName="current" to='/'>Home</Link></li>
            <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
            <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
            <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
            <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
            <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path='/' component={Home}></Route>
          <Route path='/TicTacToe' component={TicTacToe}></Route>
          <Route path='/NumGame' component={NumberGame}></Route>
          <Route path='/HighScore' component={HighScore}></Route>
          <Route path='/Profile' component={Profile}></Route>
          <Route path='/Login' component={SignOut1}></Route>
        </Switch>
      </div>
    );
  }
};

Note that this error doesn't have anything to do with the fact you're running a unit test - you'd get it at runtime too. — Joe Clay, May 29 '18 at 13:00

Siya Mzam · Accepted Answer · 2019-04-07T04:35:34.157

170

The error is correct. You need to wrap the Switch with BrowserRouter or other alternatives like HashRouter, MemoryRouter. This is because BrowserRouter and alternatives are the common low-level interface for all router components and they make use of the HTML 5 history API, and you need this to navigate back and forth between your routes.

Try doing this rather

import { BrowserRouter, Switch, Route } from 'react-router-dom';

And then wrap everything like this

<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>

edited Apr 07 '19 at 04:35

answered May 29 '18 at 12:44

Siya Mzam

4,655
1
26
44

Thank you this solved that error! But now I get another one.. Error: Error watching file for changes: EMFILE at _errnoException (util.js:1019:11) at FSEvent.FSWatcher._handle.onchange (fs.js:1360:9) npm ERR! Test failed. See above for more details. – Fille_M May 29 '18 at 13:08
1

@Fille_M Restart your development server – casraf May 29 '18 at 13:10
Yes, Try @casraf suggestion – Siya Mzam May 29 '18 at 13:32
2

should be – Andy Mar 13 '19 at 00:33
1

For connected-react-router its not working :( https://github.com/supasate/connected-react-router – Nikhil Mahirrao Mar 19 '19 at 06:41
What is the error that you are getting? Also consider posting that as a question and share link with me – Siya Mzam Mar 19 '19 at 07:04
Having version `"react-router-dom": " ^5.0.0",` Doesn't work when wrapping with `StaticRouter` for server side rendering. It used to work in `4.3.1` though. – master_dodo Apr 14 '19 at 21:17
Hvae you checked the change log for breaking changes – Siya Mzam Apr 15 '19 at 05:41

score 15 · Answer 2 · answered Jan 12 '20 at 02:05

The proper way to handle this, according to React Router devs, is to wrap your unit test in a Router. Using MemoryRouter is recommended in order to be able to reset the router between tests.

You can still do something like the following:

<BrowserRouter>
  <App />
</BrowserRouter>

Then in App:

<Switch>
  <Route />
  <Route />
</Switch>

Your unit tests for App would normally be something like:

const content = render(<App />); // Fails Unit test

Update the unit test to:

const content = render(<MemoryRouter><App /></MemoryRouter>); // Passes Unit test

Wonderful, thank you, the MemoryRouter was exactly what I was missing! — Ioanna, May 29 '20 at 03:47

score 5 · Answer 3 · answered Dec 30 '18 at 13:43

Always put BrowserRouter in the navegations components, follow the example:

import React, { Component } from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom'

var Componente1 = () => (<div>Componente 1</div>)
var Componente2 = () => (<div>Componente 2</div>)
var Componente3 = () =>  (<div>Componente 3</div>)

class Rotas extends Component {
    render() {

        return (
                <Switch>
                    <Route exact path='/' component={Componente1}></Route>
                    <Route exact path='/comp2' component={Componente2}></Route>
                    <Route exact path='/comp3' component={Componente3}></Route>
                </Switch>
        )
    }
}


class Navegacao extends Component {
    render() {
        return (

                <ul>
                    <li>
                        <NavLink to="/">Comp1</NavLink>
                    </li>
                    <li>
                        <NavLink exact  to="/comp2">Comp2</NavLink>
                    </li>
                    <li>
                        <NavLink exact to="/comp3">Comp3</NavLink>
                    </li>
                </ul>
        )
    }
}

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Navegacao />
                    <Rotas />
                </div>
            </BrowserRouter>
        )
    }
}

render(<App/>, document.getElementById("root"))

Note: the BrowserRouter accept only one children element.

BrowserRouter can accept more than one child element, actually. — Maxim Mazurok, Apr 13 '19 at 22:59

score 5 · Answer 4 · answered Jun 09 '20 at 11:28

Make sure to have correct imports in all nested components. You might get that error if one of them imports Switch from react-router instead of react-router-dom. Keeping everything consistent with 'react-router-dom' (that reexports react-router components anyway). Checked with:

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

score 1 · Answer 5 · answered Aug 30 '20 at 18:18

1

The way I did was updating the dependencies with yarn add react-router-dom or npm install react-router-domand deleting the node_modules folder and running yarn or npm install again.

answered Aug 30 '20 at 18:18

GaldinoAllan

11
1

I had no to be found in my project, maybe was a call to google apis without proper auth the reason. Anyway, your solution upgraded react-router-dom from 5.2.0 to 5.3.0 and fixed this error, thanks! – pikiou Oct 20 '21 at 00:53

score 0 · Answer 6 · answered Oct 27 '19 at 07:30

0

I was facing the same issue. It's resolved when I "import BrowserRouter from react-router-dom" and write code

<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>

answered Oct 27 '19 at 07:30

Vishnu KG Cherupuzha

17
2

score 0 · Answer 7 · answered Apr 29 '20 at 12:20

0

You can't use react-router 4.3 with react-router-dom 4.4 or vice versa. (Edit: writing it out like that: Why isn't that considered a breaking change?)

Make sure you will have same versions

answered Apr 29 '20 at 12:20

atom217

971
1
14
26

score 0 · Answer 8 · answered Jun 23 '20 at 03:42

You Should write your code like this

import {BrowserRouter, Switch, Router} from 'react-router-dom
 
 class App extends Component {
  render() {
    return (
      <div className = 'app'>
        <nav>
          <ul>
            <li><Link exact activeClassName="current" to='/'>Home</Link></li>
            <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
            <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
            <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
            <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
            <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
          </ul>
        </nav>

     <BrowserRouter>
        <Switch>
          <Route exact path='/' component={Home}></Route>
          <Route path='/TicTacToe' component={TicTacToe}></Route>
          <Route path='/NumGame' component={NumberGame}></Route>
          <Route path='/HighScore' component={HighScore}></Route>
          <Route path='/Profile' component={Profile}></Route>
          <Route path='/Login' component={SignOut1}></Route>
        </Switch>
      <BrowserRouter/>
      </div>
    );
  }
};

score 0 · Answer 9 · answered Sep 19 '20 at 08:32

Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router>[enter image description here][1]

[Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router> ][1]

 1. Open Index.js or Index.jsx
 2. add-> import { BrowserRouter } from "react-router-dom";
 3.Rap <App /> in <BrowserRouter> and </BrowserRouter> 
should  look like :
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

This question already contains multiple answers and an accepted answer. Can you explain (by editing your answer) where your answer differs from the other answers? Also know that Code-only answers are not useful in the long run. — 7uc1f3r, Sep 19 '20 at 08:59

score 0 · Answer 10 · answered Dec 22 '20 at 12:14

i found a solution to resolve this issue

here is the Example code

import React from 'react';
import Home from './HomeComponent/Home';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from "react-router-dom";
class App extends React.Component{
render(){
return(
         <BrowserRouter>
           <Switch>
            <Route path="/" render={props => (
                <Home {...props}/>
            )}/>
          </Switch>
        </BrowserRouter>
    )
  }
}
export default App;

score 0 · Answer 11 · edited Apr 30 '21 at 20:56

My NavLink and Route are in separate files, in order to stop this error I had to wrap them both in BrowserRouter:

import React from 'react';
import { NavLink, BrowserRouter } from 'react-router-dom'
const MainNav = () => (
  <BrowserRouter>
      <nav>
      <ul>
        <li>
          <NavLink exact activeClassName='current' to='/'>Home</NavLink>
        </li>
        <li>
          <NavLink exact activeClassName='current' to='/users'>Users</NavLink>
        </li>
      </ul>
    </nav>
  </BrowserRouter>
);


export default MainNav;

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from '../views/HomeView';
import UsersView from '../views/UsersView';
import { BrowserRouter } from 'react-router-dom';

const MainRoutes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/users' component={UsersView}></Route>
    </Switch>
  </BrowserRouter>
);

export default MainRoutes;`

Invariant Violation: You should not use outside a

11 Answers11

Linked