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

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

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

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.

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>

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;

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.

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>

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.

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