使用react-router-dom的Route组件时ReactDOM.render触发Element type invalid报错

• 90%以上的场景是react-router-dom版本不匹配：你写的代码是v5版本的语法，但实际项目安装的是v6及以上版本。v6做了破坏性的API变更，你导入的Switch组件在v6中已被移除，Route组件的component属性也被废弃，导入不存在的API时拿到的是无效对象，渲染时就会触发该错误。
• 次要可能是组件导入导出不匹配：你引入的Home、About、Navbar等组件存在命名导出/默认导出混用的情况，比如组件文件里用的是命名导出export const About = () => {}，但引入时用了默认导入语法import About from './pages/about'，导致拿到的是无效对象。

步骤1：确认react-router-dom版本 #

在项目根目录执行命令：

npm list react-router-dom

如果返回的版本号为6.x.x，就属于版本不匹配的问题。

步骤2：选择对应修复方案 #

方案A：适配v6语法（推荐） #

修改App.js中的路由相关代码：

1. 调整导入语句，把Switch替换为Routes：

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

2. 替换<Switch>标签为<Routes>标签，同时修改所有Route的component属性为element属性，传入JSX格式的组件（v6已移除exact属性，无需额外添加）：

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/blog' element={<Blog />} />
        <Route path='/contact-us' element={<ContactUs />} />
        <Route path='/sign-up' element={<SignUp />} />
      </Routes>
      <FooterTR />
    </Router>
  );
}

方案B：降级到v5版本（无需修改原有代码） #

不想适配新语法的话，直接执行命令安装v5的稳定版本即可：

npm install react-router-dom@5.3.4

安装完成后重启项目即可正常运行原有代码。

步骤3：排查组件导入导出问题 #

如果调整版本后还有报错，逐一检查所有引入的组件：

• 组件是默认导出export default Home，对应导入语法import Home from './pages'
• 组件是命名导出export const Home = () => {}，对应导入语法import { Home } from './pages'
  可以通过逐一注释路由内的组件，快速定位到导出导入不匹配的组件。

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