Excluding one element from the layout on the current child route in Nextjs 13

Question

Excluding one element from the layout on the current child route in Nextjs 13

183 Views Asked by Max At 20 October 2024 at 01:40

In Nextjs 13, using the app router, how can I exclude one element from the root layout from being rendered in a child route. I specifically would like to exclude the aside with the Feed component and keep the rest of the code:

// Exlude this:

<aside className={styles.feed}>
    <Feed />
</aside>

// layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
   
      <html lang="en" className={`${outfit.className} ${styles.html}`}>
        <body className={styles.body}>
          <div className={styles.wrapper}>
            <aside className={styles.feed}>
              <Feed />
            </aside>
          <div className={styles.main}>
              <nav className={styles.nav}>
                <Navbar />
              </nav>
              <main className={styles.children}>{children}</main>
            </div>
          </div>

          <footer className={styles.footer}>
            <Footer />
          </footer>
        </body>
      </html>

  
  );
}

// page.tsx
const Listing = () => {

return (
 <section className={styles.gallery}>
   // code
 </section>   
  );
};

export default Listing;

Original Q&A

There are 1 best solutions below

**Bob** · Accepted Answer

There is two solutions

Make your feed component 'use client' and add usePathname hook, and do not render at your route
If you want to make it static you can create two sub group folder with different layouts

baseLayout.tsx

export default function BaseLayout({
  children,
  isFeed
}: {
  children: React.ReactNode;
  isFeed?: boolean
}) {
  return (
      <html lang="en" className={`${outfit.className} ${styles.html}`}>
        <body className={styles.body}>
          <div className={styles.wrapper}>
            {isFeed && (
              <aside className={styles.feed}>
                <Feed />
              </aside>
              )
            }
          <div className={styles.main}>
              <nav className={styles.nav}>
                <Navbar />
              </nav>
              <main className={styles.children}>{children}</main>
            </div>
          </div>

          <footer className={styles.footer}>
            <Footer />
          </footer>
        </body>
      </html>
  );
}

app/(with-feed)/layout.tsx

export default function WithFeedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
   <BaseLayout isFeed>
     {children}
   </BaseLayout>
  );
}

app/(no-feed)/layout.tsx

export default function NoFeedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
   <BaseLayout>
     {children}
   </BaseLayout>
  );
}

Excluding one element from the layout on the current child route in Nextjs 13

There are 1 best solutions below

Related Questions in NEXT.JS

Related Questions in LAYOUT

Related Questions in APP-ROUTER

Trending Questions

Popular # Hahtags

Popular Questions