从react-router-dom导入Switch提示无对应导出项报错是什么原因？

安全阿岳

2026-9-28

报错产生原因

该报错由react-router-dom版本不兼容导致：v6及以上版本的react-router-dom做了破坏性API更新，移除了原v5版本提供的Switch组件，官方不再对外导出该组件标识符，因此导入时触发对应错误。
配套的Route组件用法在v6版本中也有调整，你当前代码中的Route写法也无法在v6版本下正常运行。

修复方案

方案1：适配v6版本（推荐）

修改导入语句，将Switch替换为v6新增的Routes组件：

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

调整JSX结构，替换<Switch>标签为<Routes>，同时将路由组件放到Route的element属性中：

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/login" element={<Login/>} />
          <Route path="/register" element={<Register/>} />
        </Routes>
      </Router>
    </div>
  );
}