如何在NextJS的Layout布局中单独移除某一页面的Header

你可以通过页面静态标记的方式灵活控制全局Layout的组件显隐，这是Next.js Pages Router场景下最常用的实现方案，步骤如下：

步骤1：给目标页面添加显隐标记 #

在你不需要展示Header的页面组件中，添加静态属性标记，示例代码如下：

// 你需要隐藏Header的页面文件（例如/pages/no-header.js）
export default function NoHeaderPage() {
  return <div>当前页面不展示Header</div>
}

// 新增静态属性标记，告知全局Layout隐藏Header相关组件
NoHeaderPage.hideHeader = true

步骤2：修改_App.js透传标记到Layout #

调整你的_app.js代码，把页面的静态属性传到Layout组件中：

function MyApp({ Component, pageProps }) {
  return (
    <Layout hideHeader={Component.hideHeader}>
      <Component {...pageProps} />
    </Layout>
  );
}

步骤3：调整Layout组件的渲染逻辑 #

在Layout中接收hideHeader参数，条件渲染需要隐藏的组件即可：

// Layout组件内部渲染逻辑
{!props.hideHeader && <Header />}
{!props.hideHeader && <SidebarMenu />}
{!props.hideHeader && <FloatingChat />}

{children}

<Footer />

可选替代方案：路由匹配判断 #

如果你不想修改页面组件，也可以在Layout中通过路由路径判断是否隐藏Header，不过维护成本更高，路径变更后需要同步修改配置：

import { useRouter } from 'next/router'

function Layout({ children }) {
  const router = useRouter()
  // 配置所有需要隐藏Header的页面路径
  const hideHeaderRoutes = ['/no-header', '/login']
  const shouldHideHeader = hideHeaderRoutes.includes(router.pathname)

  return (
    <>
      {!shouldHideHeader && <Header />}
      {!shouldHideHeader && <SidebarMenu />}
      {!shouldHideHeader && <FloatingChat />}
      {children}
      <Footer />
    </>
  )
}

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