× 错误：不变量失败：您不应该使用外面

介绍

当在 React 中使用 React Router 来管理路由时，可能会遇到以下错误：

不变量失败：您不应该使用<Switch>外面<Router>

这是因为 <Switch> 组件必须作为 <Router> 组件的直接子组件来使用。

解决方法

要解决这个错误，您需要将所有 <Switch> 组件移到 <Router> 组件的内部。

以下是一个示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

上面的例子将 <Switch> 组件移到了 <Router> 组件的内部，从而解决了这个错误。

总结

确保在使用 <Switch> 组件时，它必须是 <Router> 组件的直接子组件，这是 React Router 的要求。如果您将 <Switch> 组件放到了 <Router> 组件的外部，将会导致不变量失败的错误。