React Router 是 React 应用程序中常用的路由库，用于管理导航和提供无缝路由功能。然而，与任何库一样，随着时间的推移会出现更新和更改，这可能会导致错误，因为某些功能已经过时。
在 React 应用程序中实施路由时可能会遇到的一个常见错误是 “‘Switch’ is not exported from ‘react-router-dom'” 。
当你从旧版本的 React Router 升级到新版本（目前是 v6）时，如果没有考虑到一些已被淘汰的组件（如 <Switch> ），就会出现这种错误。
在本文中，您将了解导致此错误的原因以及如何修复它，从而确保 React 应用程序中路由和导航的流畅性。
什么原因导致 “‘Switch’ is not exported from ‘react-router-dom'” 错误？
在 React Router 版本 5 及更早版本中，<Switch> 组件用于封装 React 应用程序中的所有路由。在 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> 组件并遵循更新后的 API。
下面是相同示例在 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。
现在轮到你了： 您遇到过这个问题吗？你是如何解决的？您还使用过本文未涉及的其他方法吗？请在评论中告诉我们！
评论留言