Pfthb

I have a problem that I dont know how to solve, I get this error when running npm test Invariant Violation: You should not use <Switch> outside a <Router>. What can the problem be and how can I solve it? The test I run is the standard app.test.js that comes with react

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

The error is correct. You need to wrap the Switch with BrowserRouter or other alternatives like HashRouter, MemoryRouter. This is because BrowserRouter and its alternatives are the common low-level interface for all router components and they make use of the HTML 5 history API, and you need this to navigate back and forth between your routes.

Try doing this rather

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

And then wrap everything like this

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

Always put BrowserRouter in the navegations components, follow the example:

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

Note: the BrowserRouter accept only one children element.