Invarianten-Verletzung: sollten Sie nicht verwenden, <Switch - > außerhalb <Router>

Ich habe ein problem, ich weiß nicht, wie zu lösen, ich bekomme diese Fehlermeldung beim ausführen von npm test Invariant Violation: You should not use <Switch> outside a <Router>. Was kann das problem sein und wie kann ich es lösen? Den test habe ich ausgeführt, ist die standard-app.test.js kommt mit reagieren

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

Beachten Sie, dass dieser Fehler hat nichts mit der Tatsache zu tun, Sie eine unit-test - Sie würden es bekommen, zur Laufzeit zu.

InformationsquelleAutor Fille_M | 2018-05-29

41

Den Fehler zu korrigieren. Sie müssen wickeln Sie die Switch mit BrowserRouter oder andere alternativen wie HashRouter, MemoryRouter. Dies ist, weil BrowserRouter und alternativen sind der gemeinsame low-level-Schnittstelle für alle router, Komponenten und machen Sie Gebrauch von der HTML-5 - history API, und Sie müssen diese zurück zu bewegen und her zwischen Ihre Routen.

Versuchen, dies zu tun eher
```
import { BrowserRouter, Switch, Route } from 'react-router-dom';
```
Und dann wickeln Sie alles wie Sie diese
```
<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>
```
- Danke das gelöst, dass der Fehler! Aber jetzt bekomme ich eine andere.. Fehler: Fehler beobachten Datei für änderungen: EMFILE zu _errnoException (util.js:1019:11) bei FSEvent.FSWatcher._handle.onchange (fs.js:1360:9) npm ERR! Test fehlgeschlagen. Siehe oben für weitere details.
- Starten Sie Ihren server-Entwicklung
- Ja, Versuchen @casraf Vorschlag
- Es funktioniert jetzt, danke an alle!
- <BrowserRouter/> sollte </BrowserRouter>
- Ja, danke.
- Für connected-reagieren-router seine nicht funktioniert 🙁 github.com/supasate/connected-react-router
- Was ist die Fehlermeldung, die Sie bekommen? Auch sollten Sie die Buchung, die als Frage-und Freigabe-link mit mir
- Mit version "react-router-dom": " ^5.0.0", funktioniert nicht, wenn das umwickeln mit StaticRouter für server-side-rendering. Es verwendet, um Arbeit in 4.3.1 obwohl.
- Hvae Sie überprüft die change-log für die änderungen
InformationsquelleAutor brandNew

Stellen immer BrowserRouter in der navegations Komponenten, dann Folgen Sie dem Beispiel:

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