2

The Header component should not appear in this RegisterLayout, but the header component in the root layout is still visible. what did i do wrong?

  • RegisterLayout.tsx
import "../globals.css";
import ContentCard from "@/components/Card/ContentCard";
import Providers from "@/redux/Providers";

export default function RegisterLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      {/* Header component appears */}
      <Providers>{children}</Providers>
    </>
  );
}
  • Root Layout.tsx
  return (
    <html lang="en" className={nanumGothicFont.className}>
      {/*
        <head /> will contain the components returned by the nearest parent
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body suppressHydrationWarning={true}>
        <script
          dangerouslySetInnerHTML={{
            __html: themeInitializerScript,
          }}
        ></script>
        <Providers>
          <Card>
            <Header />
            <ContentCard>{children}</ContentCard>
            <Foorter />
            <div id="portal"></div>
          </Card>
        </Providers>
      </body>
    </html>
  );

I really want to solve it, so please help.

gndy Br
  • 51
  • 2

2 Answers2

2

As mentioned in the docs:

The root layout is defined at the top level of the app directory and applies to all routes

(emphasis mine)

You will need to remove the header component from the root layout if the intention is for it to not appear on every route.

You can do this in multiple ways, but shifting it into a route group with its own layout is probably the way to go. More on route groups: https://nextjs.org/docs/app/building-your-application/routing/route-groups

Chris
  • 54,599
  • 30
  • 149
  • 186
1

The root layout in Next.js 13 wraps {children} which is essentially all of your lower hierarchy elements, including that of the RegisterLayout.tsx

Another simplified way of visualizing this code is as follows:

RootLayout.tsx

 return (
    <html>
      <body>
        <Providers>
          <Card>
            <Header />
            <ContentCard><RegisterLayout /></ContentCard>
            <Foorter />
            <div id="portal"></div>
          </Card>
        </Providers>
      </body>
    </html>
  );

Where the children represents the child RegisterLayout.tsx

A possible solution would be to keep your RootLayout extremely simple like this:

return (
    <html>
      <body>
        <Providers>
            {children}
        </Providers>
      </body>
    </html>
  );

Then define route groups e.g. (auth) where you add a layout.tsx file and omit the <Header />.

Followed by another route group (nav) where you include a layout.tsx with the <Header />.

Daniel Craciun
  • 89
  • 2