Invariant Violation：你不应该在 <Router> 之外使用 <Switch>

IT技术 javascript reactjs react-router
2021-05-21 09:13:55

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

不变违规：您不应该<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>
    );
  }
};
4个回答

错误是正确的。您需要将SwitchwithBrowserRouter或其他替代品如HashRouter,包裹起来MemoryRouter。这是因为BrowserRouter和替代品是所有路由器组件的通用低级接口，它们使用 HTML 5 historyAPI，您需要它来在您的路由之间来回导航。

尝试这样做 

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

然后像这样包装所有东西

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

根据 React 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

始终将 BrowserRouter 放在 navegations 组件中，请遵循示例： 

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 只接受一个子元素。

确保在所有嵌套组件中都有正确的导入。如果其中一个从 react-router 而不是 react-router-dom 导入 Switch，您可能会收到该错误。使所有内容与“react-router-dom”保持一致（无论如何都会重新导出 react-router 组件）。检查：

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
其它你可能感兴趣的问题
上一篇在 TextField type="number" 上设置最小值/最大值？ 下一篇ABS 打印件始终在同一位置分裂