web-dev-qa-db-de.com

Invariante fehlgeschlagen: Sie sollten <Route> nicht außerhalb eines <Router> verwenden

Ich verwende react-router-dom Für das Routing in meiner React -Anwendung. Ein Teil meiner App wurde in einem anderen Paket extrahiert. Die Liste der Abhängigkeiten sieht folgendermaßen aus:

./ app/dashboard/package.json

{
  "dependencies": {
    "@app/components": "^1.0.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-router-dom": "^5.0.0"
  }
}

./ app/components/package.json

{
  "peerDependencies": {
    "react-router-dom": "^5.0.0"
  }
}

Wenn ich Komponenten von @app/components Verwende, für die Komponenten von react-router-dom Benötigt werden, werden folgende Fehler angezeigt:

Uncaught Error: Invariant failed: You should not use <Route> outside a <Router> 
The above error occurred in the <Context.Consumer> component:
Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router>

Warum wirft dieser Fehler? In App.js Verwende ich BrowserRouter

import React, { Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Placeholder } from '@app/components';

const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));

const App = () => (
  <Suspense fallback={<Placeholder />}>
    <Switch>
      <Route path="/auth" component={Auth} />
      <Route path="/" component={Index} />
    </Switch>
  </Suspense>
);

export default App;

client.jsx

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

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

Probleme mit 2 Instanzen von React

3
Pavel

Ich habe dies beim Testen meiner Komponente erhalten, die mit dem Projekt verknüpft ist (mit npm link) und deshalb react-router-dom mehr als einmal geladen, folgende Lösung funktioniert in meinem Fall:

Innerhalb webpack.config.js Ich fügte hinzu:

resolve: {
    alias: {        
        'react-router-dom': path.resolve('./node_modules/react-router-dom')
    }
}
3
Mehdi Dehghani

Sie müssen den benannten Export Router ebenfalls aus react-router-dom Importieren und um Ihre Switch/Route-Komponenten wickeln.

const App = () => (
  <Router>
    <Suspense fallback={<Placeholder />}>
      <Switch>
        <Route path="/auth" component={Auth} />
        <Route path="/" component={Index} />
      </Switch>
    </Suspense>
  </Router>
);
3
Christopher Ngo

Ich habe diesen kryptischen Fehler behoben, indem ich die Abhängigkeit von 'react-router-dom' aus MyComponent gelöscht habe. Ich habe 'node_modules/react-router-dom' und aus 'package.json' gelöscht. Meine App ist wie folgt aufgebaut:

    AppFolder
    ├── README.md
    ├── build
    ├── node_modules
    │   ├── react-router-dom
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.js
        ├── redux
        │   ├── reducers.js
        │   └── store.js
        └── serviceWorker.js


    MyComponent
    ├── README.md
    ├── dist
    ├── node_modules
    │   ├── react-router-dom
    ├── package-lock.json
    ├── package.json
    ├── rollup.config.js
    └── src
        ├── index.js
        ├── styles.css
        └── test.js

Dies ist der Quellcode für App.js.

import MyComponent from 'MyComponent'

export default App(){
 return (
 <div className="App">
    <HashRouter>
      <div>
        <header className="App-header">

        </header>
        <Route path="/home" component={MyComponent}/>
      </div>
    </HashRouter>
  </div>)
}

Dies ist der Export für MyComponent

export default withRouter(MyComponent);

Wenn 'React-Router-Dom' im Komponentenordner verbleibt, wird der Fehler angezeigt.

2
Juan

Ich hatte ein ähnliches Problem mit der Redirect-Komponente. Es stellte sich heraus, dass ich Redirect von 'React-Router' anstelle von 'React-Router-Dom' aufgerufen habe.

Error: Invariant failed: You should not use <Redirect> outside a <Router>
2
Marko Perendio

Sie sollten das Route-Tag und das Link-Tag in das Router-Tag aufnehmen.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <p>Home</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <p>About</p>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <p>Contact</p>
    </div>
  );
};
class App extends Component {
  render() {
    return (
        <Router>
              <div>
              <h1>W3Adda - Simple SPA</h1>
                <nav>
                  <ul>
                    <li>
                      <Link to="/">Home</Link>
                    </li>
                    <li>
                      <Link to="/about">About</Link>
                    </li>
                    <li>
                      <Link to="/contact">Users</Link>
                    </li>
                  </ul>
                </nav>

                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
              </div>
        </Router>
    );
  }
}

export default App;
1
santosh sutar

Ich habe dieses Problem gelöst, indem ich Folgendes geändert habe:

import {Route, Switch} from "react-router";

zu

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

füge einfach -dom hinzu.

0
user2552981

Ich behebe diesen Fehler, indem ich meine übergeordnete Komponente in Router einbinde.

Vor dem Lösen von Fehlern

<Header />
<div className="col-md-12 pd-0-0">
  <div className="row">
    <Sidebar />
    <div className="col-sm-10 col-md-10 pd-0-0" style={style}>
      <Router>
        <Switch>
          <Route path="/dashboard/check-in" component={CheckIn} />
          <Route path="/dashboard/deals" component={Deals} />
          <Route path="/dashboard/events" component={Events} />
          <Route path="/dashboard/invoice" component={Invoice} />
          <Route path="/dashboard/notification" component={Notification} />
          <Route path="/dashboard/profile" component={Profile} />
          <Route path="/dashboard/redemption" component={Redemptions} />
          <Route path="/dashboard/restriction-management" component={RestrictionManagement} />
        </Switch>
      </Router>
    </div>
  </div>
</div>

Nach dem Lösen des Fehlers

<Router>
  <Header />
  <div className="col-md-12 pd-0-0">
    <div className="row">
      <Sidebar />
      <div className="col-sm-10 col-md-10 pd-0-0" style={style}>
        <Switch>
          <Route path="/dashboard/check-in" component={CheckIn} />
          <Route path="/dashboard/deals" component={Deals} />
          <Route path="/dashboard/events" component={Events} />
          <Route path="/dashboard/invoice" component={Invoice} />
          <Route path="/dashboard/notification" component={Notification} />
          <Route path="/dashboard/profile" component={Profile} />
          <Route path="/dashboard/redemption" component={Redemptions} />
          <Route path="/dashboard/restriction-management" component={RestrictionManagement} />
        </Switch>
      </div>
    </div>
  </div>
</Router>
0
Pranay kumar

In meinem Fall wurde dieser Fehler durch die Verwechslung der Verwendung von Dingen (withRouter, MemoryRouter) von React-Router und React-Router-Dom verursacht. Indem nur Dinge aus dem React-Router-Dom verwendet wurden, verschwand der invariante Fehler. Hoffe das hilft jedem.

0
Maximilian Kern

Ich hatte das gleiche Problem mit meiner Create React App beim Ausführen von Tests und habe es gelöst, indem ich <Router></Router In App.js Statt in Index.js Platziert habe. wie ich es immer getan habe.

Vor:

Index.js

ReactDOM.render(
    <React.StrictMode>
        <GlobalStyle />
        <Router>
            <App />
        </Router>
    </React.StrictMode>,
document.getElementById('root')
);

App.js.

return (
    <div className="App">
        <Header />
        <Route path="/blabla" component={Whatever}
    </div>
)

Nach dem:

Index.js:

ReactDOM.render(
    <React.StrictMode>
        <GlobalStyle />
        <App />
    </React.StrictMode>,
document.getElementById('root')
);

App.js:

return (
    <div className="App">
        <Router>
            <Header />
            <Route path="/blabla" component={Whatever}
        </Router>
    </div>
)
0
Pere