Search code examples
reactjslayoutnext.js

NextJs: Hide Header and Footer only in SignIn / Register pages?

I've rendered Header and footer on all of my pages, But for couple of my pages I don't want them. This is my Layout.js. Thanks.

*

import React from "react";
import NavBar from "./NavBar";
import Notify from "./Notify";
import Modal from "./Modal";
import Footer from "./Footer";
function Layout({ children }) {
  return (
    <div>
      <NavBar />
      <Notify />
      <Modal />
      {children}
      <Footer />
    </div>
  );
}
export default Layout;

And _app.js

*

*import "../styles/globals.scss";
import Layout from "../components/Layout";
import { DataProvider } from "../store/GlobalState";
import Head from "next/head";
function MyApp({ Component, pageProps }) {
  return (
    <DataProvider>
      <Layout>
        <Head>
          <link rel="icon" href="/favicon.png" />
        </Head>
        <Component {...pageProps} />
      </Layout>
    </DataProvider>
  );
}
export default MyApp;*
Solution

  • We can take another authPage prop to Layout component. Initiate it with a default false value.

    function Layout({ children, authPage = false }) {
  return (
    <div>
      {!authPage && <NavBar />}
      <Notify />
      <Modal />
      {children}
      {!authPage && <Footer />}
    </div>
  );
}

    Then in the Sign/Register page you can render it like this:

    <Layout authPage = {true}>
  ....
</Layout>

    For all other pages:

    <Layout>
  ....
</Layout>

    You can check the implementation here