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

在React Router中，组件用于渲染其所有子组件中的第一个匹配路由。但是如果您在组件外部使用组件，则会收到以下错误：

Invariant failed: You should not use <Switch> outside <Router>

这是因为组件需要使用组件来实现路由功能，而组件没有能力在没有正确父级组件的情况下正常工作。

要解决这个问题，将组件放在组件内部。

例如：

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

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

export default App;

在上面的示例中，组件包含所有路由组件，包括和组件。

记住，使用组件时，您应该只在内部使用它，而不是在组件之外使用它。这样才能确保React Router正常工作，以便正确地渲染路由组件。

完整示例代码可以在这里查看。