tengo un problema que no se como solucionar me sale este error al ejecutar npm test
Infracción invariable: no debe usar
<Switch>fuera de un<Router>
¿Cuál puede ser el problema y cómo puedo solucionarlo? La prueba que ejecuto es el app.test.js estándar 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> ); } };El error es correcto. Debe envolver el Switch con BrowserRouter u otras alternativas como HashRouter , MemoryRouter . Esto se debe a que BrowserRouter y las alternativas son la interfaz común de bajo nivel para todos los componentes del enrutador y utilizan la API de history de HTML 5, y la necesita para navegar de un lado a otro entre sus rutas.
Intenta hacer esto mejor
import { BrowserRouter, Switch, Route } from 'react-router-dom';Y luego envuelve todo así
<BrowserRouter> <Switch> //your routes here </Switch> </BrowserRouter>La forma correcta de manejar esto, según los desarrolladores de React Router, es envolver su prueba de unidad en un enrutador. Se recomienda usar MemoryRouter para poder reiniciar el enrutador entre pruebas.
Todavía puedes hacer algo como lo siguiente:
<BrowserRouter> <App /> </BrowserRouter> Luego en App :
<Switch> <Route /> <Route /> </Switch> Sus pruebas unitarias para la App normalmente serían algo como:
const content = render(<App />); // Fails Unit testActualice la prueba unitaria a:
const content = render(<MemoryRouter><App /></MemoryRouter>); // Passes Unit testPonga siempre BrowserRouter en los componentes de navegaciones, 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 acepta solo un elemento secundario.