如何从 NextJS 布局中的单个页面中删除 Header？答案

【问题标题】：How to remove Header from a single page in NextJS Layout?如何从 NextJS 布局中的单个页面中删除 Header？
【发布时间】：2022-04-03 20:12:40
【问题描述】：

我正在使用 Layout 开发 NextJS 项目，以便我可以对所有页面使用相同的页眉和页脚。但是对于其中一页，我不需要页眉，我只需要页脚。有没有办法做到这一点？

这是我的 _App.js：

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

这就是我渲染它们的方式：

  <Header />
  <SidebarMenu />
  <FloatingChat />

  {/* Display props */}
  {children}

  <Footer />

【问题讨论】：

您可以创建一个单独的组件，例如<Header /> 和<Footer />，并根据需要调用它们中的一个或两个。或者，如果您想深入挖掘，请构建您自己的 _document.tsx 文件，read here。

标签： reactjs next.js

【解决方案1】：

您可以使用next/router 的路径名属性来获取它当前所在的页面，然后如果该页面是非页眉页面，则不呈现页眉。

【讨论】：

【解决方案2】：

我知道已经 3 个月了，但我仍然想回答这个问题，因为我是初学者，当他们只链接通常非常模糊的文档时遇到困难。

考虑到这是你的 layout.jsx

  <Header />
  <SidebarMenu />
  <FloatingChat />
  {children}
  <Footer />

您可以使用next/router 显示或隐藏组件

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import SidebarMenu from "./SidebarMenu";
import { useRouter } from "next/router";

export default function Layout({children}){
    const router = useRouter();
    if(router.pathname != "/pagename" )
    return (
         <Header />
         <SidebarMenu />
         <FloatingChat />
         {children}
         <Footer />
    )
    else {
        return (
         <SidebarMenu />
         <FloatingChat />
         {children}
        )
    }
}

我们只是告诉 layout.jsx 文件在该页面和其他任何地方显示特定布局，如果它确实出现在该页面上，我们可以显示不同的布局，如果您希望它在多个页面上，您也可以在路径名旁边.

【讨论】：