Can the root layout component be hidden in some nested routes inside the Next.js application folder?

Question

Is there any way to prevent rootlayout from being wrapped by dashboardlayout? Next.js v13 Documentation:

My file structure:

I could use route groups; however, doing so would disable wrapping in my contact, pricing routes. Is there any way to prevent this from happening? I want the home navigation bar to be on the contact information and pricing pages, but I don't want the home navigation bar to be on the dashboard.

I tried using routing 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>
  );
}

Answer 1

Since your Navbar is a client component a>, you can avoid using the routing group, but can do so by using usePathnameto prevent it from showing up in 来阻止它显示在 /dashboard>, like this:

"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 
Actual content
;
}

Answer 2

After some digging I managed to get it working with route groups.

File structure

/app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
      {children}
    
  );
}

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

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

/app/(Login)/layout.tsx

export default function LandingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    

      
      {children}
      
    
  );
}

Youssouf's solution works great. However, the dashboard route still has the rootlayout CSS styles and other components, which requires me to manually add lines of code to components that I don't want to appear in /dashboard.