React-admin: Error: Invariant failed: You should not use <Route> outside a <Router>

[christiaanwesterbeek]

When installing react-admin and including dependency "react-router-dom": "5.0.0" to package.json, an error occurs when using customRoutes.

Error: Invariant failed: You should not use <Route> outside a <Router>

Here's the show case. https://codesandbox.io/s/n0wq5lxkp

I just burned a few hours to narrow down the react-admin app only to find out that even the bare minimum revealed the same error. I only needed to remove dependency "react-router-dom": "5.0.0" from package.json to fix the error.

[christiaanwesterbeek]

I'm closing this issue immediately. If somebody else has the same problem in the future, a search engine and this issue will be their friend.

[daominhsangvn]

Hi, how can i get rid of this ? I having similar issue when trying to add a custom route.

[christiaanwesterbeek]

@daominhsangvn

Check your package.json at the dependencies or devDependencies section. Do you see "react-router-dom": ... in there? If so, remove that line, call yarn (which is shorthand for yarn install or npm install if you use npm) and re-run your app.

[talentAN]

When installing react-admin and including dependency "react-router-dom": "5.0.0" to package.json, an error occurs when using customRoutes.

Error: Invariant failed: You should not use <Route> outside a <Router>

Here's the show case. https://codesandbox.io/s/n0wq5lxkp

I just burned a few hours to narrow down the react-admin app only to find out that even the bare minimum revealed the same error. I only needed to remove dependency "react-router-dom": "5.0.0" from package.json to fix the error.

Besides, do remember:

1. remove your lock file like (yarn.lock or npm.lock) and node_modules;
2. run the yarn install or npm insall;
3. recompile your codes, it will totaly work~ .

[NiMaGangFour]

Just remember:
Before using {Route} from 'react-router-dom' library, just make sure you put <Route> inside of <BrowserRouter>. If not you will get the same Error.

The correct way to invoke should like that:

<BrowserRouter>
  <div>
   <Route path="/" component={} />
  </div>
</BrowserRouter>

[mbchoa]

@christiaanwesterbeek

How are you using the Route component without having the react-router-dom depdendency? Am I missing something here?

[christiaanwesterbeek]

Because react-admin itself has a react-router-dom dependency. Are you using react-admin? If so, your own app should depend on react-admin. react-admin depends on react-router-dom.

[kopax]

@christiaanwesterbeek if in your source, you are importing react-router-dom, then it should appear in your package.json, other way around is to let react-admin expose `react-router-dom itself. This is due to dependency management, that expect to have valid import listed within the package.json.

[cucumberslice]

I would not recommend deleting react-router-dom from the package.json. unless you are not using it at all. its wiser to

import { BrowserRouter, Link} from 'react-router-dom

and wrap Link inside of BrowserRouter

<BrowserRouter>
       <Link to="/" className="item">Cats</Link>
</BrowserRouter>

[jeyadharanigithub]

import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import SearchComponent from "./search";
import LoginForm from "./loginform";

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <BrowserRouter>
          <div>
            <Route path="/search" component={SearchComponent} />
            <Route path="/loginform" component={LoginForm} />
          </div>
        </BrowserRouter>
      </React.Fragment>
    );
  }
}

export default App;

Remove react-router-dom from package .json file and do npm install

[warren922]

I fix it by:

checking the version in react-admin by
yarn list react-router-dom

then, change your version of react-router-dom to the same as react-admin one by editing your package.json

type yarn install

DONE!!!

[vishnukgcherupuzha]

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>

[anil-mirge]

This could also happen specifically when you have not imported the BrowserRouter class from 'react-router-dom' inside of your index.js file. Ideally, you wrap your root component <App> inside of BrowserRouter inside of index.js file in your react project like so --

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));

[kimkablitz]

For me react-router and react-router-dom just dont work the same way, check your packages version and compatibility.

[xtfs]

Reinforcing what @kimkablitz wrote.
DO NOT use both (react-router and react-router-dom) choose one.
I particular prefer react-router-dom because I use Link component.

[josias-r]

This error could be caused, when you use npm link somepackage to locally link a package w/ react-router-dom installed too.

Possible fix (w/ reat-app-rewired):

const path = require("path");
const { override, addWebpackAlias } = require("customize-cra");

module.exports = override(
  addWebpackAlias({
    react: path.resolve("./node_modules/react"),
    "react-router": path.resolve("./node_modules/react-router"),
    "react-router-dom": path.resolve("./node_modules/react-router-dom"),
  }),
);

Some more info.

[kambleaa007]

i dont have devDependencies

[timotgl]

I fix it by:

checking the version in react-admin by
yarn list react-router-dom

then, change your version of react-router-dom to the same as react-admin one by editing your package.json

type yarn install

DONE!!!

This was the only thing that worked for me as well. Had to change it to "react-router-dom": "5.1.2" in package.json. Wrapping the main <App> in a <BrowserRouter> wasn't necessary. It seems that react-admin is using its own connected-router somewhere deeper in the Admin component tree.

[nghiatle]

This could also happen specifically when you have not imported the BrowserRouter class from 'react-router-dom' inside of your index.js file. Ideally, you wrap your root component <App> inside of BrowserRouter inside of index.js file in your react project like so --

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));

it worked