react-admin: Error: Invariant failed: You should not use outside a

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

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.

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 <Route> should like that:

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

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>

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

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>

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

@christiaanwesterbeek

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

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~ .

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

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.

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.

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!!!

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.

For those who get Switch issue after December 2021 :- Alternate solution : 1). Uninstall Previous Version- npm uninstall react-router-dom 2). Install Older version- npm install react-router-dom@5.0.0

go to index.js and wrap your <App /> in Browse router like this <BrowserRouter><App/></BrowserRouter> and import import {BrowserRouter} from ‘react-router-dom’;

before that make sure you’ve installed ‘react-router-dom’

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