Question 51062 in Javascript Question posted in
A very good W3school tutorial can be found here.

Is there a way to prevent a root layout component from being shown in some nested route in the app folder of Next.js? – Javascript

Is there a way to prevent rootlayout from being wrapped around dashboardlayout? Next.js v13 doc:

enter image description here

My file structure:

enter image description here

I could use route groups; however, doing so would disable the wrapping in my contact, pricing routes. Is there a way to prevent this from happening? I would like the home navbar across the contact and pricing page but don’t want the home page navbar in my dashboard.

I tried using route groups; however, it disabled wrapping in my pricing and contact routes.

navbar.tsx

"use client";

import { useEffect, useState } from "react";
import { Disclosure } from "@headlessui/react";


function joinClassName(...classes: string[]) {
  return classes.filter(Boolean).join(" ");
}


export default function Navbar() {
  const [navbar, setNavbar] = useState(false);

  const changeBackground = () => {
    if (window.scrollY >= 64) {
      setNavbar(true);
    } else {
      setNavbar(false);
    }
  };

  useEffect(() => {
    changeBackground();
    window.addEventListener("scroll", changeBackground);
  });

  return (
    <Disclosure as="nav">
      {({ open, close }) => (
        <>
          <div
            className={joinClassName(
              navbar || open ? "dark:bg-black bg-white" : "bg-transparent",
              " fixed top-0 left-0 right-0 z-50 "
            )}
          ></div>
        </>
      )}
    </Disclosure>
  );
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After doing some digging, I managed to make it work with route groups.

    File structure

    enter image description here

    /app/layout.tsx

    export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="">
      <body>{children}</body>
    </html>
  );
}

    /app/(dash)/dashboard/layout.tsx

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

    /app/(landing)/layout.tsx

    export default function LandingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section
      className={
        "container mx-auto h-auto bg-white dark:bg-landing-gradient lg:px-10"
      }
    >
      <Navbar></Navbar>
      {children}
      <LightDarkModeButton></LightDarkModeButton>
    </section>
  );
}

    The solution from Youssouf works well. However, the dashboard route would still have the rootlayout CSS styles and other components, which would require me to manually add lines of code to components that I do not want shown in /dashboard.


  2. 0

    Since your Navbar is a Client Component, you could avoid using Route Groups and yet be able to prevent it from being shown in /dashboard, by using usePathname, like so:

    "use client";

// Other imports ...

import { usePathname } from "next/navigation";

export default function Navbar() {
  const pathname = usePathname();
  // useEffect and other codes ...

  if (pathname == "/dashboard") {
    return <></>;
  }
  return <div>Actual content</div>;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search