1

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

这是我的 _App.js：

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

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

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

  {/* Display props */}
  {children}

  <Footer />
4

2 回答 2

3

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

于 2021-09-14T18:03:23.187 回答
1

我知道已经 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 文件在不是该页面和其他任何地方显示特定布局，如果它确实出现在该页面上，我们可以显示不同的布局，如果您希望它在多个页面上，您也可以在路径名旁边。

于 2021-12-23T16:03:08.387 回答