React报Element type is invalid错误，GameComponent渲染异常如何解决？

你遇到的Error: Element type is invalid报错本质是渲染时拿到的组件不是预期的函数/类，而是对象/undefined，按照下面的步骤逐一排查即可： #

步骤1：优先排查react-router-dom版本不兼容问题 #

你现有代码用的是react-router-dom v5的语法，如果当前项目安装的是v6版本，就会触发该报错：

• 首先在项目根目录运行命令查看版本：
  npm list react-router-dom
• 如果返回版本号为6.x.x，两种方案可选：
  • 方案1：降级到v5兼容现有代码
    运行安装命令npm install react-router-dom@5.3.4，安装完成后重启项目即可，不需要修改现有代码。
  • 方案2：修改代码适配v6语法
    需做以下改动：
    1. 导入语句替换Switch为Routes：

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

    2. 所有Route标签的component={组件}写法替换为element={<组件/>}，例如：

    <Route path = "/" exact element={<LoginComponent/>}/>
    

    3. 自定义的AuthenticatedRoute组件需要同步修改为适配v6的路由守卫写法。

步骤2：检查所有组件的导入导出规则 #

• 确认所有引入的组件（LoginComponent、AuthenticatedRoute等）都是默认导出，即文件末尾有export default 组件名的声明，导入时不要加{}，只有命名导出的组件才需要加{}导入。
• 检查导入路径的大小写、层级是否正确，避免因为路径错误拿到undefined的模块。

步骤3：低概率问题排查 #

如果是非常老版本的React，不支持<></>空标签语法，可以把Router内部的空标签替换为<React.Fragment></React.Fragment>即可。 #

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