如何修复React中的 “‘Switch’ is not exported from ‘react-router-dom'” 错误

React Router 是 应用程序中常用的路由库，用于管理导航和提供无缝路由功能。然而，与任何库一样，随着时间的推移会出现更新和更改，这可能会导致错误，因为某些功能已经过时。

在 React 应用程序中实施路由时可能会遇到的一个常见错误是 “‘Switch’ is not exported from ‘react-router-dom'” 。

当你从旧版本的 升级到新版本（目前是 v6）时，如果没有考虑到一些已被淘汰的组件（如 <Switch> ），就会出现这种错误。

在本文中，您将了解导致此错误的原因以及如何修复它，从而确保 React 应用程序中路由和导航的流畅性。

什么原因导致 “‘Switch’ is not exported from ‘react-router-dom'” 错误？

在 React Router 版本 5 及更早版本中，<Switch> 组件。在 React Router 版本 6 中，<Switch> 组件已被弃用，取而代之的是 <Routes> 组件。

与已废弃的 <Switch> 组件相比，React Router v6 中的 <Routes> 组件提供了一种声明性更强、更灵活的路由 *** 。

因此，如果您最近升级到了 React Router v6（或更新的版本），并且仍在尝试使用已废弃的 <Switch> 组件，那么您将会遇到 “‘Switch’ is not exported from ‘react-router-dom'”  错误。

‘Switch’ is not exported from ‘react-router-dom’ 错误截图

修复 “‘Switch’ is not exported from ‘react-router-dom'” 错误的 2 种 ***

根据项目的预期 *** 和要求，有两种 *** 可以解决这一错误。这两种 *** 如下：

• 使用 <Routes> 而不是 <Switch>
• 将 react-router-dom 版本降级到 5 或以下

1. 使用 <Routes> 而不是 <Switch>

修复 “‘Switch’ is not exported from ‘react-router-dom'” 错误的一种 *** 是将 <Switch> 替换为 <Routes> 。

让我们来看一个示例，看看如何将路由代码从 React Router 版本 5 中已废弃的 <Switch> 组件更新为 React Router 版本 6 中的新 <Routes> 组件。

在 React Router 版本 5 中：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
};
export default App;

在上述代码中，我们使用 <Switch> 组件来封装路由。但是，在 React Router 第 6 版中，我们需要更新路由代码，使用 <Routes> 组件并遵循更新后的 。

下面是相同示例在 React Router 版本 6 及以后的版本中的效果：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
};
export default App;

正如你所看到的，我们用 <Routes> 组件替换了 <Switch> 组件，现在每个 <Route> 都是使用 element 道具而不是 component 道具定义的。

提示：在 React Router 第 6 版中不再需要精确的道具，因为它是默认行为。此外，<Route> 组件不再使用 component={Home} 来分配组件，而是使用 element={<Contact/>}。

React Router v6 中路由比交换机的优势

随着 React Router v6 的发布，<Routes> 组件的引入与之前版本中已废弃的 <Switch> 组件相比带来了一些优势。

让我们来看看在 React 应用程序中使用 <Routes> 处理路由逻辑的一些优势。

1. 改进嵌套路由

与 <Switch> 相比， <Routes> 允许改进嵌套路由配置。使用 <ROutes>，您可以通过在其他 <Route> 组件中嵌套 <Route> 组件来轻松定义嵌套路由，从而更直观、更有条理地处理复杂的路由结构。

这有助于简化具有多层嵌套路由的大型应用程序中的路由逻辑管理。

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />}>
<Route path="/team" element={<Team />} />
<Route path="/history" element={<History />} />
</Route>
<Route path="/contact" element={<Contact />} />
</Routes>

2. 动态路由匹配

<Routes> 在根据路由参数动态匹配和呈现路由方面提供了更大的灵活性。这样就能在应用程序中实现更加动态和数据驱动的路由选择。

<Routes>
<Route path="/" element={<Home />} />
<Route path="/users/:userId" element={<UserProfile />} />
<Route path="/products/:productId" element={<ProductDetail />} />
</Routes>

3. 改进的错误处理

This can help improve the user experience by gracefully handling invalid URLs or routes that do not exist in your application.

<Routes> 为未匹配的路由提供了改进的错误处理。如果未找到路由， <Routes> 会自动显示 “Not Found” 组件或您可以定义的自定义错误组件。

这样就可以优雅地处理应用程序中不存在的无效 URL 或路由，从而帮助改善用户体验。

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
{/* Error route */}
<Route path="*" element={<NotFound />} />
</Routes>

2. 将 react-router-dom 版本降级到 5 或以下

如果想继续在项目中使用 <Switch> ，可以将 react-router-dom 版本降级到 5 或更低，从而修复错误。

如果你现有的项目是使用旧版本的 React Router 构建的，这可能是一个可行的解决方案。要做到这一点，首先要使用下面的命令卸载已安装的最新版 React 路由器：

npm uninstall react-router-dom

现在，您可以使用该命令安装包含 <Switch> 组件的最后一个主要版本，即 5.2.0 版：

npm install react-router-dom@5.2.0

小结

在本文中，您了解了 React 中的错误 “‘Switch’ is not exported from ‘react-router-dom'”，并探索了几种修复 *** 。您还了解了使用较新的 <Routes> 组件而非过时的  <Switch> 组件的优势。

在开始一个新项目时，建议始终使用最新版本的 React Router，因为它提供了显著的改进和持续的更新。

但是，假设您正在开发一个现有项目，而且没有时间大量更新代码以使用新的 React Router v6 语法和组件。在这种情况下，请继续使用与您的代码兼容的旧版 React Router。

现在轮到你了： 您遇到过这个问题吗？你是如何解决的？您还使用过本文未涉及的其他 *** 吗？请在评论中告诉我们！