React项目App组件返回异常，报元素类型无效错误如何解决？

根因定位 #

你的报错核心是导入了不存在的组件导致渲染时得到undefined，90%以上概率是react-router-dom版本不兼容问题：你当前安装的是v6版本，但代码使用的是v5版本的API，v6已经完全移除了Switch等组件，导致你导入的Switch是undefined，触发报错。

排查步骤 #

• 执行命令npm list react-router-dom查看当前安装的react-router-dom版本，如果输出为6.x.x版本，即可确认是版本不兼容问题。
• 如果版本是v5，再检查所有组件导入路径是否正确：确认./components/UsersList、./components/AddUser、./components/About对应的文件真实存在，文件名大小写和导入语句完全匹配（打包工具对大小写敏感，大小写不一致也会导致导入undefined）。

解决方法 #

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

直接执行安装命令安装v5稳定版：
npm install react-router-dom@5.3.4
安装完成后重启项目即可正常运行。

方案2：修改代码适配v6版本 #

修改App.jsx的代码适配v6的新API：

1. 替换导入语句：将原来的import { Route, Switch } from 'react-router-dom'改为import { Route, Routes } from 'react-router-dom'
2. 替换路由部分代码：

<Routes>
    <Route path='/' element={
        <>
        <h1 className='title is-1'>All Users</h1>
        <hr /><br />
        <AddUser
            email={isEmail}
            username={isUsername}
            handleChange={handleChange}
            handleSubmit={handleSubmit}
        />
        <hr /><br />
        <UsersList users={users} />
        </>
    } />
    <Route path='/about' element={<About />} />
</Routes>

v6提示：v6默认开启路径精确匹配，不需要再加exact属性；component和render属性统一替换为element属性，直接传入组件实例即可。

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