NextJS能否实现全路由共用Header组件，避免切页重渲染与props重置

完全可以实现和react-router-dom类似的、路由切换时Header不重复渲染、不重置状态的效果，Next.js 从早期的Pages Router到现在主推的App Router都有成熟的对应机制，核心是把需要全局常驻的组件从“独立页面层”抽到“公共布局层”，避免路由切换时组件树变动导致组件被销毁重建。

具体实现方式 #

1. App Router 模式（Next.js 13+ 默认推荐） #

App Router 的根布局文件是全局所有路由共享的顶层组件，整个应用运行期间只会挂载一次，路由切换时不会触发重渲染，是实现全局布局最便捷的方式：

// app/layout.js 文件
import Header from './Header'

export const metadata = {
  title: '全局布局示例'
}

// 所有路由页面都会作为子级被这个根布局包裹
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* Header 放在布局层，所有页面共享，路由切换时不会被重新挂载 */}
        <Header />
        <main>
          {/* children 是当前路由匹配到的具体页面内容 */}
          {children}
        </main>
      </body>
    </html>
  )
}

这个结构和你熟悉的react-router-dom嵌套逻辑完全对齐：

• 全局放置的<Header />对应原Router包裹层下的常驻Header位置
• children就等同于Switch组件里匹配到的对应路由页面（Home/About/Users）

路由切换时，Next.js 只会替换children对应的页面内容，根布局、放在布局层的Header组件完全不会走重新挂载的流程，组件内部的状态、传入的props都会完整保留，不会被重新初始化。

2. 传统Pages Router 模式（Next.js 12及更早版本） #

如果还在使用Pages Router开发，不需要在每个页面单独引入Header，通过自定义全局入口文件pages/_app.js统一包裹所有页面即可：

// pages/_app.js 文件
import Header from '../components/Header'

// 这个组件是所有页面的统一渲染入口
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Header />
      {/* Component 是当前路由匹配到的页面组件 */}
      <Component {...pageProps} />
    </>
  )
}

这种方式下路由切换同样只会替换Component对应的页面内容，Header组件全程常驻，不会被重新初始化。

为什么之前逐页面引入Header会出现状态重置？ #

当你在每个页面组件里单独引入Header时，每个页面对应的组件树是完全独立的：路由切换时旧页面的整棵组件树会被整体卸载，新页面的组件树会被重新挂载。即使引入的是完全相同的Header组件，因为两次引入的位置分属不同的页面子树，会被React识别为两个独立的组件实例，自然会走完整的初始化流程，props和内部状态就会被重置。
只要把Header抽到不随路由切换变动的公共父组件层，就能彻底解决这个问题。

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