React CodeSandbox报错：Element type is invalid 求助修复方案

这个错误的核心原因是你使用了react-router-dom v6版本中已移除的API：Switch组件在v6里已被Routes替代，直接导入Switch会得到undefined，把它当作组件渲染就会触发"Element type is invalid"错误。另外v6里Route组件的用法也有变化，不再使用component属性，而是改用element。

具体修复步骤： #

1. 修改react-router-dom的导入语句
   将原来的导入代码：

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

   替换为：

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

2. 更新路由结构，替换Switch为Routes，修改Route属性
   把switchAdmin和switchUser中的<Switch>换成<Routes>，同时将Route的component属性改为element，直接传递JSX组件：

   const switchAdmin = (
     <Routes>
       <Route exact path="/" element={<Login role={role} />} />
       <Route path="/dashboard" element={<ProtectedRoute />}>
         <Route index element={<Dashboard />} />
       </Route>
       <Route path="/user" exact element={<User />} />
     </Routes>
   );
   
   const switchUser = (
     <Routes>
       <Route exact path="/" element={<Login />} />
       <Route path="/user" exact element={<User role={role} />} />
     </Routes>
   );
   

3. 适配ProtectedRoute组件（关键）
   v6中路由保护的写法和v5完全不同，需要修改protectedRoute.js的代码，改用Outlet和Navigate实现权限控制：

   import { Navigate, Outlet } from "react-router-dom";
   
   const ProtectedRoute = () => {
     // 替换成你的实际认证、角色判断逻辑
     const isAuthenticated = true;
     const userRole = "admin";
   
     return isAuthenticated && userRole === "admin" ? <Outlet /> : <Navigate to="/" />;
   };
   
   export default ProtectedRoute;
   

4. 可选：初始化role状态
   初始role为undefined，可以给个默认值避免不必要的渲染问题：

   const [role, setRole] = useState(null);
   

修复后的完整App.js示例： #

import { useEffect, useState } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import ProtectedRoute from "./components/protectedRoute";
import Login from "./components/login";
import Dashboard from "./components/dashboard";
import User from "./components/user";

export const App = () => {
  const [role, setRole] = useState(null);

  const switchAdmin = (
    <Routes>
      <Route exact path="/" element={<Login role={role} />} />
      <Route path="/dashboard" element={<ProtectedRoute />}>
        <Route index element={<Dashboard />} />
      </Route>
      <Route path="/user" exact element={<User />} />
    </Routes>
  );

  const switchUser = (
    <Routes>
      <Route exact path="/" element={<Login />} />
      <Route path="/user" exact element={<User role={role} />} />
    </Routes>
  );

  return (
    <Router>
      <div>{role === "admin" ? switchAdmin : switchUser}</div>
    </Router>
  );
};

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