不変量違反。<ルーター>の外側で<スイッチ>を使用してはならない

質問

私は解決する方法がわからない問題があります、私はnpmのテストを実行するときにこのエラーが発生します。

不変量違反です。あなたは <Switch> の外側で <Router>

何が問題で、どうすれば解決できるのでしょうか？私が実行するテストは、reactに付属する標準のapp.test.jsです。

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

どのように解決するのですか？

エラーは正しいです。この場合 Switch を BrowserRouter のような他の選択肢もあります。 HashRouter , MemoryRouter . これは BrowserRouter と代替はすべてのルータコンポーネントに共通の低レベルインターフェースであり、HTML 5 の history API を使用し、ルート間を行き来するためにこれが必要です。

むしろこれをやってみてください

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

そして、すべてをこのようにラップします。

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