How to hide header only at one page in nextjs app?

user_1306271 0
Viewed 2402

I work on Nextjs apllication, I've created <Header /> component and added it to _app.tsx file but i don't need it displayed only at one page, could you please tell me is it possible ?

next.js
2 Answers

You can get the current route with the useRouter hook. You'll likely want to check against asPath because pathname will not match dynamic or catch-all routes. It's a simple way to future-proof your check.

import { useRouter } from 'next/router';

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

You can also use a layout pattern similar to option 4. Your default layout can be your current layout. You can make an additional header-less layout for your pages that don't need a header.

user_153048140

If you have a wrapper component you can check the pathname and render conditionally the <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;
user_118350730
Related