Инвариантное нарушение: вы не должны использовать <Switch> вне <Router>

Ошибка правильная. Вам нужно обернуть SwitchBrowserRouter или другими альтернативами, такими как HashRouter, MemoryRouter. Это связано с тем, что BrowserRouter и альтернативы являются общим низкоуровневым интерфейсом для всех компонентов маршрутизатора, и они используют HTML 5 history API, и вам это нужно для перехода между вашими маршрутами.

Попробуй сделать это скорее

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

А потом все так завернуть

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

Всегда помещайте BrowserRouter в компоненты навигации, следуйте примеру:

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

Примечание: BrowserRouter принимает только один дочерний элемент.

Я столкнулся с той же проблемой. Это разрешается, когда я «импортирую BrowserRouter из дома-реактора». и написать код

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

Правильный способ справиться с этим, по мнению разработчиков React Router, - обернуть свой модульный тест в Router. Рекомендуется использовать MemoryRouter, чтобы иметь возможность перезагружать маршрутизатор между тестами.

Вы все еще можете сделать что-то вроде следующего:

<BrowserRouter>
  <App />
</BrowserRouter>

Затем в App:

<Switch>
  <Route />
  <Route />
</Switch>

Ваши модульные тесты для App обычно выглядят примерно так:

const content = render(<App />); // Fails Unit test

Обновите модульный тест до:

const content = render(<MemoryRouter><App /></MemoryRouter>); // Passes Unit test

Вы не можете использовать response-router 4.3 с react-router-dom 4.4 или наоборот. (Обновлено: написать это так: почему это не считается критическим изменением?)

Убедитесь, что у вас будут одинаковые версии

Убедитесь, что у всех вложенных компонентов есть правильный импорт. Вы можете получить эту ошибку, если один из них импортирует Switch из response-router вместо response-router-dom. Сохранение всего согласованного с 'response-router-dom' (который в любом случае реэкспортирует компоненты реактивного маршрутизатора). Проверено:

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

Вы должны написать свой код вот так

import {BrowserRouter, Switch, Router} from 'react-router-dom
 
 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>

     <BrowserRouter>
        <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>
      <BrowserRouter/>
      </div>
    );
  }
};

Я обновил зависимости с помощью yarn add react-router-dom или npm install react-router-dom, удалил папку node_modules и снова запустил yarn или npm install.

Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router>[][1]

[Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router> ][1]

 1. Open Index.js or Index.jsx
 2. add-> import { BrowserRouter } from "react-router-dom";
 3.Rap <App /> in <BrowserRouter> and </BrowserRouter> 
should  look like :
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

я нашел решение для решения этой проблемы

вот пример кода

import React from 'react';
import Home from './HomeComponent/Home';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from "react-router-dom";
class App extends React.Component{
render(){
return(
         <BrowserRouter>
           <Switch>
            <Route path = "/" render = {props => (
                <Home {...props}/>
            )}/>
          </Switch>
        </BrowserRouter>
    )
  }
}
export default App;

Мои NavLink и Route находятся в отдельных файлах, чтобы устранить эту ошибку, мне пришлось обернуть их оба в BrowserRouter:

import React from 'react';
import { NavLink, BrowserRouter } from 'react-router-dom'
const MainNav = () => (
  <BrowserRouter>
      <nav>
      <ul>
        <li>
          <NavLink exact activeClassName='current' to='/'>Home</NavLink>
        </li>
        <li>
          <NavLink exact activeClassName='current' to='/users'>Users</NavLink>
        </li>
      </ul>
    </nav>
  </BrowserRouter>
);


export default MainNav;

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from '../views/HomeView';
import UsersView from '../views/UsersView';
import { BrowserRouter } from 'react-router-dom';

const MainRoutes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component = {Home}></Route>
      <Route exact path='/users' component = {UsersView}></Route>
    </Switch>
  </BrowserRouter>
);

export default MainRoutes;`