wake-up-neo.com

Invariante Verletzung: Sie sollten <Switch> nicht außerhalb eines <Routers> verwenden

Ich habe ein Problem, das ich nicht lösen kann. Ich erhalte diesen Fehler, wenn npm test Invariant Violation: You should not use <Switch> outside a <Router> ausgeführt wird. Was kann das Problem sein und wie kann ich es lösen? Der Test, den ich ausführte, ist der Standard app.test.js, der mit React geliefert wird

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>
    );
  }
};
javascriptreactjsreact-router
10
Fille_M

Der Fehler ist korrekt. Sie müssen die Switch mit BrowserRouter oder anderen Alternativen wie HashRouter, MemoryRouter umschließen. Dies liegt daran, dass BrowserRouter und seine Alternativen die übliche Low-Level-Schnittstelle für alle Routerkomponenten sind und sie die HTML 5 history-API verwenden, und Sie benötigen diese, um zwischen Ihren Routen hin und her zu navigieren.

Versuchen Sie das lieber 

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

Und dann alles so einwickeln

<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
<BrowserRouter/>
25
brandNew

Fügen Sie BrowserRouter immer in die Navigationskomponenten ein. 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"))

Hinweis: Der BrowserRouter akzeptiert nur ein untergeordnetes Element.

1
Fábio Rodrigues Fonseca