如何在nextjs应用程序中仅隐藏一页标题？

Question

我在 Nextjs 应用程序上工作，我已经创建了<Header />组件并将其添加到_app.tsx文件中，但我不需要它仅显示在一页上，您能告诉我这是否可能？

Answer 1

如果您有包装器组件，您可以检查路径名并有条件地渲染<Header />

import { Fragment } from "react";
import MainHeader from "./../layout/main-header";
import { useRouter } from "next/router";

function Layout(props) {
  const router = useRouter();

  const showHeader = router.pathname === "/admin" ? false : true;
  return (
    <Fragment>
        {showHeader && <MainHeader />}
        <main>{props.children}</main>
    </Fragment>
  );
}

export default Layout;

Answer 2

您可以使用useRouter hook获取当前路由。您可能需要进行检查，asPath因为pathname不会匹配动态或包罗万象的路由。这是一种让您的支票面向未来的简单方法。

import { useRouter } from 'next/router';

const { asPath } = useRouter();
return (
   <>
     {asPath !== '/some-route' && <Header/>}
   </>
)

您还可以使用类似于选项 4 的布局模式。您的默认布局可以是您当前的布局。您可以为不需要页眉的页面创建额外的无页眉布局。