Vite搭建React项目中react-router-dom报错：未找到Switch导出

你遇到的报错是因为react-router-dom v6 已经彻底移除了 Switch 组件，改用 Routes 组件来做路由匹配容器，同时 Route 组件的用法也有变更。不需要重装依赖，直接修改代码即可：

修改后的代码 #

import './App.css';
import {Login} from './pages/Login';
import {Register} from "./pages/Register";
import {MainLayout} from './layouts/MainLayout';
// 替换 Switch 为 Routes
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';


function App() {
  return (
    <div>
      <Router>
        {/* 用 Routes 替代原来的 Switch */}
        <Routes>
          {/* 1. 移除 exact，v6 默认精确匹配
              2. component 替换为 element，传入 JSX 元素而非组件引用 */}
          <Route path="/" element={<Register />} />
          <Route path="/login" element={<Login />} />
          <Route path="/dashboard" element={<MainLayout />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App

关键改动点说明 #

• Switch → Routes：v6 用 Routes 作为路由匹配的根容器，它会自动匹配最符合的路由路径
• component → element：Route 不再接受 component 属性，需要通过 element 传入渲染的 JSX 节点（比如 <Register />）
• 移除 exact：v6 中 Route 的 path 默认就是精确匹配，只有当路径包含通配符（如 /*）时才会模糊匹配

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