React Router DOM 中找不到 'Switch' 导出项

在 'react-router-dom' 中未找到名为 'Switch' 的导出项（可能的导出项包括：AbortedDeferredError，Await，BrowserRouter，Form，HashRouter，Link，MemoryRouter，NavLink，Navigate，NavigationType，Outlet，Route，Router，RouterProvider，Routes，ScrollRestoration，UNSAFE_DataRouterContext，UNSAFE_DataRouterStateContext，UNSAFE_LocationContext，UNSAFE_NavigationContext，UNSAFE_RouteContext，UNSAFE_useScrollRestoration，createBrowserRouter，createHashRouter，createMemoryRouter，createPath，createRoutesFromChildren，createRoutesFromElements，createSearchParams，defer，generatePath，isRouteErrorResponse，json，matchPath，matchRoutes，parsePath，redirect，renderMatches，resolvePath，unstable_HistoryRouter，unstable_useBlocker，unstable_usePrompt，useActionData，useAsyncError，useAsyncValue，useBeforeUnload，useFetcher，useFetchers，useFormAction，useHref，useInRouterContext，useLinkClickHandler，useLoaderData，useLocation，useMatch，useMatches，useNavigate，useNavigation，useNavigationType，useOutlet，useOutletContext，useParams，useResolvedPath，useRevalidator，useRouteError，useRouteLoaderData，useRoutes，useSearchParams，useSubmit）。

出现此错误的原因是，从 React Router DOM v6 开始，'Switch' 组件已被弃用，取而代之的是 'Routes' 组件。

解决方法：

将代码中的 'Switch' 替换为 'Routes'。

例如，以下代码：

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

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

应该改为：

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

如果您仍然需要使用 'Switch' 组件，可以安装 React Router DOM v5 版本。

npm install react-router-dom@5

然后在代码中导入 'Switch' 组件：

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

**注意：**使用 React Router DOM v5 版本可能会导致与其他库的兼容性问题。建议尽可能使用 React Router DOM v6 版本。