不变违规:您不应该使用 <Switch>在 <Router> 之外 [英] Invariant Violation: You should not use <Switch> outside a <Router>

问题描述

我有一个不知道如何解决的问题，运行 npm test 时出现此错误

<块引用>

Invariant Violation:你不应该在

之外使用

问题是什么，我该如何解决?我运行的测试是react自带的标准app.test.js

class App 扩展组件 {使成为() {返回 (
<导航><ul><li><准确链接 activeClassName="current" to='/'>Home</Link></li><li><链接精确的 activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li><li><链接精确的 activeClassName="current" to='/NumGame'>Quick Maths</Link></li><li><链接精确的 activeClassName="current" to='/HighScore'>Highscore</Link></li><li><准确链接 activeClassName="current" to='/Profile'>Profile</Link></li><li><链接准确的 activeClassName="current" to='/Login'>退出</Link></li></nav><开关><路由精确路径='/' 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></开关>
);}};

解决方案

错误正确.您需要使用 BrowserRouter 或其他替代方法(如 HashRouter、MemoryRouter)包装 Switch.这是因为 BrowserRouter 和替代品是所有路由器组件的通用低级接口，它们使用 HTML 5 history API，您需要它来向后导航和在您的路线之间前进.

尝试这样做

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

然后像这样包装所有东西

<开关>//你的路线在这里</开关></BrowserRouter>

I have a problem that I don't 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 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>

这篇关于不变违规:您不应该使用 &lt;Switch&gt;在 &lt;Router&gt; 之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！