React项目使用react-router-dom遇Switch导出未找到报错求助

问题根源 #

你遇到的错误是因为react-router-dom v6 彻底移除了Switch组件，取而代之的是Routes组件，同时组件的用法也有调整。从报错信息里的possible exports列表也能看到，只有Routes而没有Switch。

解决方案 #

方案1：升级代码适配v6（推荐） #

将代码中的Switch替换为Routes，同时调整Route的写法：

• 移除component/render属性，改用element属性传入JSX元素
• Routes内部的Route默认精确匹配路径，无需额外配置exact

示例代码修改：

// 旧写法（v5及以下）
import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/profile" render={() => <Profile />} />
    </Switch>
  );
}

// 新写法（v6）
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/profile" element={<Profile />} />
    </Routes>
  );
}

方案2：降级到react-router-dom v5（不推荐） #

如果你暂时不想修改代码，可以回退到支持Switch的v5版本：

# npm
npm install react-router-dom@5

# yarn
yarn add react-router-dom@5

额外注意 #

v6还有其他API变化，比如useHistory替换为useNavigate，嵌套路由需要用Outlet组件等，建议优先适配v6以获得更好的性能和新特性。

内容的提问来源于stack exchange，提问作者Ahad Dev