React开发电商项目遇Header组件render方法报错该如何解决？

问题排查修复方案 #

核心原因定位

Check the render method of Header错误说明Header组件在执行渲染逻辑时出现了异常，通常由依赖不兼容、资源导入失败、语法不匹配三类问题导致，可按以下步骤逐一排查：

• 第一步：排查SVG导入问题

你在Header中使用了{ ReactComponent as Logo }的语法导入svg资源，该语法仅在react-scripts@2.0.0及以上版本支持，同时需要确认：

1. 项目路径下src/assets/crown.svg文件真实存在
2. 导入路径../../assets/crown.svg和Header组件的实际位置匹配（Header组件在src/components/header/目录下时，该路径才是正确的）
   你可以暂时把<Logo className="logo" />替换为普通文本（比如<span>logo</span>），重启项目后如果错误消失，即可确认是SVG导入问题，调整路径或升级react-scripts到匹配版本即可修复。

• 第二步：排查React Router版本不兼容问题

你当前的路由写法是React Router v5的语法，如果项目安装的是v6版本的react-router-dom，会直接触发渲染错误：

1. 执行命令npm list react-router-dom查看已安装的版本
2. 如果是6.x版本，可直接降级到v5稳定版和教程保持一致，执行命令npm install react-router-dom@5.3.4即可
3. 如果要使用v6版本，需要调整路由写法：把App.js中的Switch替换为Routes，每个Route的component属性替换为element，示例如下：

<Routes>
  <Route exact path='/' element={<HomePage />} />
  <Route path='/shop' element={<ShopPage />} />
  <Route path='/signin' element={<SignInSignUpPage />} />
</Routes>

• 第三步：排查scss依赖缺失问题

你引入了header.styles.scss，如果项目没有安装scss对应的依赖，也会导致组件加载失败，执行命令npm install sass安装对应依赖，重启项目即可。

• 第四步：查看完整错误栈定位问题

打开浏览器开发者工具的控制台，Check the render method of Header只是上层提示，下方会打印更具体的底层错误信息，根据具体的报错（比如变量未定义、模块找不到等）可以更快定位问题。

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