Как удалить заголовок с отдельной страницы в NextJS Layout?

Question

Я работаю над проектом NextJS с использованием Layout, чтобы использовать один и тот же верхний и нижний колонтитулы для всех страниц. Но для одной из страниц мне не нужен верхний колонтитул, мне нужен только нижний колонтитул. Есть какой-либо способ сделать это?

Это мой _App.js:

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

Вот как я их визуализирую:

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

  {/* Display props */}
  {children}

  <Footer />

Answer 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 показывать конкретный макет не на этой странице, а везде, и если он появляется на этой странице, мы можем показать другой макет, также вы можете указать пути, если хотите, на нескольких страницах.

Answer 2

Вы можете использовать свойство pathname next / router, чтобы получить текущую страницу, а затем не отображать заголовок, если страница не является страницей заголовка.