NextJS/React ignore parent component

Question

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

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

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.

Answer 1

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 (
      <CheckoutLayout>
         ...
      </CheckoutLayout>
   );
}
export default MyPage