React路由跳转报getComputedStyle类型错误，devicon致页面空白

报错本质说明：window.getComputedStyle 接口要求第一个入参必须是已挂载到DOM树的真实元素，当devicon-react-svg的内部逻辑拿到的DOM引用为null/undefined时，调用该方法就会抛出类型错误，直接中断React的渲染流程，最终导致目标路由页面无法挂载、出现全页空白。
这个问题和你首屏遍历渲染图标的逻辑没有直接关系，核心诱因是devicon-react-svg的自身实现缺陷，没有适配现代React版本的渲染时序。

常见触发根因 #

• 你当前代码使用数组索引作为列表key（key={i}），在路由切换组件重渲染时，React会复用已经被卸载回收的组件实例，导致组件内部持有的DOM引用指向了已经不存在的旧节点，刚好踩中getComputedStyle的参数校验规则
• 项目开启React 18 StrictMode时，组件会被双重挂载做逻辑校验，devicon-react-svg的生命周期逻辑没有处理挂载过程中的空ref状态，在ref尚未绑定完成时就提前触发样式计算，传入空值给getComputedStyle
• 路由跳转过程中，图标组件先于目标路由页面完成挂载，此时DOM树还未完成更新，内部样式计算逻辑拿到的节点引用失效

可落地的修复方案 #

• 优先替换列表的key值：把原来的key={i}改成每个图标的唯一标识（比如图标名称key={icon}），从根源避免React复用失效的组件实例
• 给DevIcon组件加路由状态的挂载锁：只有当路由匹配状态稳定、目标组件已经完成DOM挂载后，再渲染图标列表，避免过渡态下的空ref触发异常，示例代码：

  // 等待路由稳定后再渲染图标列表
  {isRouteFullyMatched && icons.map((icon) => (
      <DevIcon
        key={icon}
        icon={icon}
        className={styles.devIcon}
      />
  ))}
  

• 给全局的getComputedStyle加异常兜底：在项目入口处加一段防护逻辑，当方法收到非Element类型的入参时，直接返回空的样式对象，避免硬错误炸掉整个React渲染树
• 长期根治方案：替换掉已长期停更的devicon-react-svg库，直接在项目中引入对应图标的本地SVG资源，手写简单组件渲染，完全规避老库的兼容问题，也能减少项目打包体积

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