Tengo un problema que no sé cómo resolver, me sale este error cuando se ejecuta mecanismo nacional de prevención de la prueba Invariant Violation: You should not use <Switch> outside a <Router>. ¿Cuál puede ser el problema y cómo puedo solucionarlo? La prueba de I carrera es la norma app.test.js que viene con reaccionar

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>
    );
  }
};
  • Tenga en cuenta que este error no tiene nada que ver con el hecho de que está ejecutando una prueba de unidad – que había en tiempo de ejecución también.
InformationsquelleAutor Fille_M | 2018-05-29

2 Comentarios

  1. 46

    El error es correcta. Deberá ajustar el Switch con BrowserRouter o de otras alternativas como la HashRouter, MemoryRouter. Esto es debido a que BrowserRouter y alternativas son los comunes de la interfaz de bajo nivel para todos los router de los componentes y hacer uso del HTML 5 history de la API, y usted necesita para navegar hacia atrás y adelante entre sus rutas.

    Trate de hacer de este lugar

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

    Y, a continuación, envuelva todo como esta

    <BrowserRouter>
     <Switch>
      //your routes here
     </Switch>
    </BrowserRouter>
    • Gracias a esta solucionado ese error! Pero ahora tengo otro.. Error: Error de observación de archivo de los cambios: EMFILE en _errnoException (util.js:1019:11) en FSEvent.FSWatcher._handle.onchange (fs.js:1360:9) npm ERR! Error en la prueba. Véase más arriba para más detalles.
    • Reinicie el servidor de desarrollo
    • Sí, Intentar @casraf sugerencia
    • Funciona ahora, gracias a todos!
    • <BrowserRouter/> debe ser </BrowserRouter>
    • Sí, gracias.
    • Para la conexión de la reacción-router no su trabajo 🙁 github.com/supasate/connected-react-router
    • ¿Cuál es el error que estás recibiendo? También considere la posibilidad de publicar que como una pregunta y comparte el enlace con el me
    • Tener la versión "react-router-dom": " ^5.0.0", no funciona cuando envolver con StaticRouter para el procesamiento del lado del servidor. Se utiliza para trabajar en 4.3.1 aunque.
    • Hvae verificó el registro de cambios para romper con los cambios

  2. 0

    Siempre poner BrowserRouter en el navegations componentes, siga el ejemplo:

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

    Nota: el BrowserRouter aceptar sólo uno de los niños elemento.

    • BrowserRouter puede aceptar más de un elemento secundario, en realidad.

Dejar respuesta

Please enter your comment!
Please enter your name here