首次运行React应用报错：'Switch'（导入为'Switch'）在'react-router-dom'中未找到的解决方法咨询

嘿，这个问题我之前踩过坑——你肯定是用了react-router-dom v6版本！这个版本里彻底移除了Switch组件，换成了Routes（注意是单数形式，你之前写成Routers系统当然识别不了啦），同时Route组件的用法也有了不小的变化。

我帮你把代码按v6的规范修正好，一步步来：

核心修正点： #

• 把导入语句里的Switch替换成Routes
• 原来Route标签直接包裹组件的写法，要改成通过element属性传递组件（比如<Route path="/login" element={<Login />} />）
• v6默认就是精确匹配，不用再写exact属性了

修正后的完整代码： #

import './App.css';
import React from "react";
// 替换Switch为Routes
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            {/* 可以补充其他导航链接，方便测试 */}
            <li>
              <Link to="/login">Login</Link>
            </li>
          </ul>
        </nav>

        {/* 用Routes替代原来的Switch */}
        <Routes>
          {/* 通过element属性传递对应组件 */}
          <Route path="/login" element={<Login />} />
          <Route path="/reset" element={<PasswordReset />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

// 别忘了定义其他用到的组件，不然会报错哦
function Login() {
  return <h2>Login</h2>;
}

function PasswordReset() {
  return <h2>Password Reset</h2>;
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

如果实在不想改代码，也可以降级到react-router-dom v5版本，但更推荐适配v6的写法——它的路由匹配逻辑更清晰，性能也更优。

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