next.js - 如何仅在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;