如何解决React项目中ReactDOM.render触发的Element type invalid报错

问题根因 #

90%以上的概率是你安装的react-router-dom版本为v6，但是代码使用了v5版本的废弃API，导致导入的Switch为undefined，触发对应报错。

排查步骤 #

• 查看项目package.json中react-router-dom的版本号：如果版本号>=6.0.0，就是语法不兼容导致的问题
• 检查/src/Home.jsx文件是否正确使用export default导出Home组件，不存在导出错误
• 确认所有导入路径的大小写、层级正确，没有拼写错误

解决方案 #

方案1：适配v6版本语法（推荐） #

修改App.jsx代码如下：

import React from "react";
// 把Switch替换为Routes
import { Routes, Route } from "react-router-dom";
import Home from "/src/Home.jsx";

function App() {
  return (
    <>
      <Routes>
        {/* component属性替换为element，传入组件实例，v6默认精确匹配可以省略exact */}
        <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
}

export default App;

方案2：降级到v5版本 #

如果不想改动现有代码，执行以下命令安装v5版本的react-router-dom即可：
npm install react-router-dom@5

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