从标准React迁移至Gatsby后Header组件重复显示问题排查

嘿，我来帮你梳理下从Create React App迁移到Gatsby后，Header组件重复显示的几个核心原因——这类问题在迁移时挺容易碰到的：

• 全局布局与页面组件重复引入Header
  Gatsby的最佳实践里通常会用一个全局Layout组件来统一包裹页面内容，很多人会把Header放在这个布局组件里（比如src/components/layout.js）。如果你的页面组件（就是你贴出代码的这个文件）自己又导入并渲染了<Header />，那自然会出现两次Header。举个例子：
  假设你的Layout.js是这样的：

  import React from 'react'
  import Header from './Header'
  
  const Layout = ({ children }) => {
    return (
      <>
        <Header /> {/* 全局布局里已经渲染了Header */}
        <main>{children}</main>
      </>
    )
  }
  export default Layout
  

  而你当前的页面组件又单独导入并渲染了Header，就会造成重复。

• 页面组件内部多次渲染Header
  检查你当前页面组件的完整代码，是不是不小心在render逻辑里写了两次<Header />？或者在循环、条件判断块里重复输出了这个组件——比如某个条件分支里多写了一次，或者数组map的时候意外包含了Header。

• 组件导入/导出的路径错误
  有没有可能你导入了两个不同路径的Header组件？比如一次是../Components/Header，另一次是./Header（路径层级错了），导致两个不同的组件实例被渲染；或者Header组件本身的代码里，不小心递归渲染了自己（比如在Header的return里又写了<Header />）。

• 页面生成逻辑或插件问题（相对少见）
  如果前面的排查都没问题，那可以看看gatsby-node.js里的页面生成代码，是不是不小心把同一个页面生成了多次；或者某些路由相关的Gatsby插件，导致页面被重复挂载，连带Header也重复渲染了。

快速排查步骤 #

1. 先打开你的全局Layout组件，确认里面是否已经包含了Header；
2. 检查当前页面组件的完整代码，找有没有重复的<Header />调用；
3. 查看Header组件本身的代码，排除递归渲染的可能；
4. 核对所有导入Header的路径，确保都是指向同一个组件文件。

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