Kann die Root-Layout-Komponente in einigen verschachtelten Routen im Next.js-Anwendungsordner ausgeblendet werden?

Question

Gibt es eine Möglichkeit, dies zu verhindern? rootlayout 被 dashboardlayout 包裹？ Next.js v13 Dokumentation:

Meine Dateistruktur:

Ich könnte Routengruppen verwenden; dies würde jedoch das Umschließen meiner contact、pricing Routen deaktivieren. Gibt es eine Möglichkeit, dies zu verhindern? Ich möchte, dass die Home-Navigationsleiste auf den Kontaktinformations- und Preisseiten angezeigt wird, aber ich möchte nicht, dass die Home-Navigationsleiste auf dem Dashboard angezeigt wird.

Ich habe versucht, Routing-Gruppen zu verwenden. Dadurch wurde jedoch das Umbrechen meiner Preis- und Kontaktrouten deaktiviert.

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

由于您的 Navbar 是一个 客户端组件 a>，您可以避免使用路由组，但能够通过使用 usePathname来阻止它显示在 /dashboard 中>，像这样：

"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

经过一番挖掘后，我设法使其与路线组一起工作。

文件结构

/app/layout.tsx

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

/app/(破折号)/dashboard/layout.tsx

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

/app/(登陆)/layout.tsx

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

      
      {children}
      
    
  );
}

Youssouf 的解决方案效果很好。但是，仪表板路由仍然具有 rootlayout CSS 样式和其他组件，这需要我手动将代码行添加到我不希望在 /dashboard 中显示的组件。