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

WBOLT_COM 11 月 02, 2023 466 0

attempted-import-error-featured-1024x512-1

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’ 错误截图

修复 “‘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>