React Router 是 React 应用程序中常用的路由库，用于管理导航和提供无缝路由功能。然而，与任何库一样，随着时间的推移会出现更新和更改，这可能会导致错误，因为某些功能已经过时。
在 React 应用程序中实施路由时可能会遇到的一个常见错误是 “‘Switch' is not exported from ‘react-router-dom'” 。
当你从旧版本的 React Router 升级到新版本（目前是 v6）时，如果没有考虑到一些已被淘汰的组件（如 ），就会出现这种错误。
在本文中，您将了解导致此错误的原因以及如何修复它，从而确保 React 应用程序中路由和导航的流畅性。
什么原因导致 “‘Switch' is not exported from ‘react-router-dom'” 错误？
在 React Router 版本 5 及更早版本中， 组件用于封装 React 应用程序中的所有路由。在 React Router 版本 6 中， 组件已被弃用，取而代之的是 组件。
与已废弃的 组件相比，React Router v6 中的 组件提供了一种声明性更强、更灵活的路由方法。
因此，如果您最近升级到了 React Router v6（或更新的版本），并且仍在尝试使用已废弃的 组件，那么您将会遇到 “‘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 种方法
根据项目的预期方法和要求，有两种方法可以解决这一错误。这两种方法如下：
- 将 react-router-dom 版本降级到 5 或以下
修复 “‘Switch' is not exported from ‘react-router-dom'” 错误的一种方法是将 替换为 。
让我们来看一个示例，看看如何将路由代码从 React Router 版本 5 中已废弃的 组件更新为 React Router 版本 6 中的新 组件。
在 React Router 版本 5 中：
在上述代码中，我们使用 组件来封装路由。但是，在 React Router 第 6 版中，我们需要更新路由代码，使用 组件并遵循更新后的 API。
下面是相同示例在 React Router 版本 6 及以后的版本中的效果：
正如你所看到的，我们用 组件替换了 组件，现在每个 都是使用 element 道具而不是 component 道具定义的。
提示：在 React Router 第 6 版中不再需要精确的道具，因为它是默认行为。此外， 组件不再使用 component={Home} 来分配组件，而是使用 element={。
React Router v6 中路由比交换机的优势
随着 React Router v6 的发布， 组件的引入与之前版本中已废弃的 组件相比带来了一些优势。
让我们来看看在 React 应用程序中使用 处理路由逻辑的一些优势。
1. 改进嵌套路由
与 相比， 允许改进嵌套路由配置。使用 ，您可以通过在其他 组件中嵌套 组件来轻松定义嵌套路由，从而更直观、更有条理地处理复杂的路由结构。
这有助于简化具有多层嵌套路由的大型应用程序中的路由逻辑管理。
2. 动态路由匹配
在根据路由参数动态匹配和呈现路由方面提供了更大的灵活性。这样就能在应用程序中实现更加动态和数据驱动的路由选择。
3. 改进的错误处理
This can help improve the user experience by gracefully handling invalid URLs or routes that do not exist in your application.
为未匹配的路由提供了改进的错误处理。如果未找到路由， 会自动显示 “Not Found” 组件或您可以定义的自定义错误组件。
这样就可以优雅地处理应用程序中不存在的无效 URL 或路由，从而帮助改善用户体验。
2. 将 react-router-dom 版本降级到 5 或以下
如果想继续在项目中使用 ，可以将 react-router-dom 版本降级到 5 或更低，从而修复错误。
如果你现有的项目是使用旧版本的 React Router 构建的，这可能是一个可行的解决方案。要做到这一点，首先要使用下面的命令卸载已安装的最新版 React 路由器：
npm uninstall react-router-dom
现在，您可以使用该命令安装包含 组件的最后一个主要版本，即 5.2.0 版：
npm install react-router-dom@5.2.0
小结
在本文中，您了解了 React 中的错误 “‘Switch' is not exported from ‘react-router-dom'”，并探索了几种修复方法。您还了解了使用较新的 组件而非过时的 组件的优势。
在开始一个新项目时，建议始终使用最新版本的 React Router，因为它提供了显著的改进和持续的更新。
但是，假设您正在开发一个现有项目，而且没有时间大量更新代码以使用新的 React Router v6 语法和组件。在这种情况下，请继续使用与您的代码兼容的旧版 React Router。
现在轮到你了： 您遇到过这个问题吗？你是如何解决的？您还使用过本文未涉及的其他方法吗？请在评论中告诉我们！
原文地址：https://www.wbolt.com/attempted-import-error-switch-is-not-exported-from-react-router-dom.html
