根佈局元件是否可以隱藏在 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 是一個客戶端元件 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 中顯示的元件。