根布局组件是否可以隐藏在 Next.js 应用程序文件夹内的某些嵌套路由中？

Question

有没有办法防止 rootlayout 被 dashboardlayout 包裹？ Next.js v13 文档：

我的文件结构：

我可以使用路线组；但是，这样做会禁用我的 contact、pricing 路由中的包装。有没有办法防止这种情况发生？我希望主页导航栏位于联系信息和定价页面上，但不希望主页导航栏位于仪表板中。

我尝试使用路由组；但是，它禁用了我的定价和联系路线中的包装。

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 是一个 客户端组件，您可以避免使用路由组，但能够通过使用 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 中显示的组件。