使用Create React App时导入Switch组件报错求助

1. 报错原因：Switch已被移除 #

react-router-dom从v6版本开始，彻底移除了Switch组件，改用Routes组件替代。你代码里导入Switch自然会触发找不到导出的错误。

2. 替换Switch为Routes的正确代码示例 #

错误写法（v5及以前）： #

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

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

正确写法（v6）： #

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

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

注意：v6中Route的属性也有变化，原component替换为element，需要传入JSX元素而非组件引用。

3. 让Link正常工作的关键 #

Link必须被BrowserRouter（或HashRouter等Router组件）包裹，否则无法生效。应用最外层结构要符合以下要求：

import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      {/* 导航区域 */}
      <nav>
        <Link to="/home">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      {/* 路由匹配区域 */}
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

4. 版本兼容方案 #

• 若不想升级到v6，可继续使用Switch，但需确保你的react-router-dom版本是v5及以下。执行命令查看版本：

npm list react-router-dom

• 若版本是v5，保留Switch的写法即可，无需替换为Routes，同时Route继续使用component或render属性。

内容的提问来源于stack exchange，提问作者Victor Winner