react-router-dom 中 'Switch' 未导出的解决方案

问题描述

在使用 React Router 时，当你尝试导入 Switch 组件时遇到错误提示：'Switch' is not exported from 'react-router-dom'。

这个问题通常发生在你安装了 React Router v6 版本，而代码中使用的是 v5 版本的 API。从 package.json 可以看到项目确实使用了 v6.0.0 版本：

"dependencies": {
  "react-router-dom": "^6.0.0"
}

解决方案

方案一：升级代码到 React Router v6（推荐）

React Router v6 用 Routes 组件取代了 v5 中的 Switch 组件，并且路由语法有显著变化。

v5 语法（已废弃）：

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

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

v6 语法（推荐）：

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

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

主要变化

1. Switch 替换为 Routes
2. Route 组件使用 element 属性而不是子组件
3. 不再需要 exact 属性（v6 默认使用精确匹配）

方案二：降级到 React Router v5

如果你暂时不想迁移代码，可以降级到 v5 版本：

npm uninstall react-router-dom
npm install react-router-dom@5

详细迁移指南

路由定义的变化

在 v6 中，路由配置更加简洁明了：

// v6 路由配置示例
<Routes>
  <Route path="/teams/:teamName/matches/:year" element={<MatchPage />} />
  <Route path="/teams/:teamName" element={<TeamPage />} />
  <Route path="/" element={<HomePage />} />
</Routes>

嵌套路由的改进

v6 引入了更好的嵌套路由支持：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="contact" element={<Contact />} />
  </Route>
</Routes>

相对路径链接

v6 中的链接自动相对于当前路由：

// 在 /about 页面中，这个链接指向 /about/team
<Link to="team">团队信息</Link>

常见问题

多个路由组件的使用

注意

不建议为每个路由创建单独的 Routes 容器，这会破坏路由的正常匹配机制。

不推荐的做法：

// 错误示例：不要这样使用
<div className="App">
  <Routes>
    <Route path="/" element={<Navbar />} />
  </Routes>
  <Routes>
    <Route path="/" element={<Header />} />
  </Routes>
</div>

正确的做法：

// 正确示例：将所有路由放在一个 Routes 中
<div className="App">
  <Routes>
    <Route path="/" element={
      <>
        <Navbar />
        <Header />
        <About />
        <Contact />
      </>
    } />
    <Route path="/signup" element={<Signup />} />
  </Routes>
</div>

总结

React Router v6 带来了许多改进，虽然需要一些适应，但提供了更简洁、更强大的路由功能。建议直接迁移到 v6 并使用新的 Routes 组件，而不是降级到旧版本。

迁移提示

1. 将 Switch 替换为 Routes
2. 使用 element 属性代替子组件
3. 移除 exact 属性
4. 享受更简洁的路由配置！

如需了解更多迁移细节，请参考官方文档：React Router 升级指南。