Search code examples

NextJS/React ignore parent component

I'm using NextJS and i have A Layout component as a wrapper in _app.js:

export default function MyApp({ Component, pageProps }) {
  return (
        <Component {...pageProps} />

The Layout component simply has a Top navigation in it for navigating the website.

So my problem is in some pages/routes in my app i Don't want the navigation bar to be visible/rendered because it will be useless just taking up space or it doesn't make sense to have a navigation bar at top.

For example in the admin dashboard /admin or /about

So how i can simply ignore that parent Layout component?

I have this solution with NextJS but im not really sure if it's the correct way/most efficient way of doing that:

// Layout.js
const router = useRouter();

 if (router.route === "/dashboard" || router.route === "/about") {
    return <Fragment></Fragment>;
  } else {
    // return layout

Thanks for answering.


  • Move the <Layout> component to your pages. So you can make multiple reusable Layout Components for your use-cases.

    For example, if you have a webshop you might want to have a completely different layout for you checkout, and for your profile pages. Just move it to all your page objects and you're fine.

    const MyPage = () => {
       return (
    export default MyPage