NextJs如何仅在登录/注册页面隐藏Header与Footer组件

方案1：页面自定义布局配置（推荐，扩展性强） #

该方案灵活度最高，后续需要新增特殊布局的页面只要加对应配置即可，不需要修改全局逻辑。

• 步骤1：给不需要展示Header、Footer的页面添加静态配置属性
  以登录页pages/login.js为例：

function Login() {
  // 页面原有逻辑保持不变
}

// 新增布局配置标识
Login.getLayoutProps = () => ({
  hideHeaderFooter: true
})

export default Login

注册页等其他需要隐藏的页面按照相同规则添加配置即可。

• 步骤2：修改_app.js读取页面配置并传递给Layout组件

import "../styles/globals.scss";
import Layout from "../components/Layout";
import { DataProvider } from "../store/GlobalState";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  // 读取当前页面的自定义布局配置，无配置则默认空对象
  const layoutProps = Component.getLayoutProps?.(pageProps) || {}
  return (
    <DataProvider>
      {/* 将配置透传给Layout */}
      <Layout {...layoutProps}>
        <Head>
          <link rel="icon" href="/favicon.png" />
        </Head>
        <Component {...pageProps} />
      </Layout>
    </DataProvider>
  );
}
export default MyApp;

• 步骤3：修改Layout.js根据配置做条件渲染

import React from "react";
import NavBar from "./NavBar";
import Notify from "./Notify";
import Modal from "./Modal";
import Footer from "./Footer";

// 新增hideHeaderFooter参数，默认false不隐藏
function Layout({ children, hideHeaderFooter = false }) {
  return (
    <div>
      {/* 只有不需要隐藏的时候才渲染NavBar */}
      {!hideHeaderFooter && <NavBar />}
      <Notify />
      <Modal />
      {children}
      {/* 只有不需要隐藏的时候才渲染Footer */}
      {!hideHeaderFooter && <Footer />}
    </div>
  );
}
export default Layout;

方案2：按路由路径直接判断（适合少量排除页面） #

如果需要隐藏Header、Footer的页面数量少且路径固定，可以直接在全局通过路由判断，不需要修改页面文件：

• 步骤1：修改_app.js引入路由并判断路径

import "../styles/globals.scss";
import Layout from "../components/Layout";
import { DataProvider } from "../store/GlobalState";
import Head from "next/head";
import { useRouter } from 'next/router'

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  // 填入所有不需要展示Header、Footer的页面路径
  const noHeaderFooterRoutes = ['/login', '/register']
  const hideHeaderFooter = noHeaderFooterRoutes.includes(router.pathname)
  return (
    <DataProvider>
      <Layout hideHeaderFooter={hideHeaderFooter}>
        <Head>
          <link rel="icon" href="/favicon.png" />
        </Head>
        <Component {...pageProps} />
      </Layout>
    </DataProvider>
  );
}
export default MyApp;

• 步骤2：Layout.js的修改逻辑和方案1完全一致即可。

内容的提问来源于stack exchange，提问作者Sanjaya Senarathane