React项目启动报错：react-router-dom中未找到Switch导出

问题原因 #

你升级到了 React Router DOM v6，这个版本移除了Switch组件，改用Routes组件作为路由容器，同时Route组件的API也有变更：

• 原component属性被element替代，需要传入JSX元素而非组件引用
• exact属性不再需要，v6中Routes下的Route默认就是精确匹配

修改后的代码 #

import React from 'react';
// 替换 Switch 为 Routes
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import LoginPage from '../components/auth/LoginPage';
import RegistrationPage from '../components/auth/RegistrationPage';
import ProfilePage from '../components/user/ProfilePage';
import ListingsPage from '../components/listings/ListingsPage';
import ListingDetailsPage from '../components/listings/ListingDetailsPage';


function AppRoutes() {
  return (
    <Router>
      {/* 替换 Switch 标签为 Routes */}
      <Routes>
        {/* 用 element 替代 component，传入JSX组件 */}
        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegistrationPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/listings" element={<ListingsPage />} />
        <Route path="/listings/:id" element={<ListingDetailsPage />} />
     </Routes>
   </Router>
  );
}

export default AppRoutes;

额外说明 #

• 把组件名从Routes改成了AppRoutes，避免和导入的Routes组件重名，防止潜在冲突
• 如果后续需要嵌套路由，v6中要使用Outlet组件，这是和v5的另一重要区别

内容的提问来源于stack exchange，提问作者Swapnil Chaure