Bolehkah komponen reka letak akar disembunyikan dalam beberapa laluan bersarang di dalam folder aplikasi Next.js?

Question

Adakah cara untuk mencegah rootlayout 被 dashboardlayout 包裹？ Next.js v13 Dokumentasi:

Struktur fail saya:

Saya boleh menggunakan kumpulan laluan; walau bagaimanapun, berbuat demikian akan melumpuhkan pembungkusan dalam contact、pricing laluan saya. Adakah terdapat cara untuk mengelakkan perkara ini daripada berlaku? Saya mahu bar navigasi rumah berada pada maklumat hubungan dan halaman harga, tetapi saya tidak mahu bar navigasi rumah berada pada papan pemuka.

Saya cuba menggunakan kumpulan penghalaan; walau bagaimanapun, ia melumpuhkan pembungkusan harga dan laluan kenalan saya.

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

Terima kasih kepada Navbar 是一个 客户端组件 a>，您可以避免使用路由组，但能够通过使用 usePathname来阻止它显示在 /dashboard in> anda, seperti ini:

"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

Selepas beberapa penggalian, saya berjaya membuatnya berfungsi dengan kumpulan laluan.

Struktur fail

/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}
      
    
  );
}

Penyelesaian Youssouf berfungsi dengan baik. Walau bagaimanapun, laluan papan pemuka masih mempunyai komponen yang ditunjukkan dalam rootlayout CSS 样式和其他组件，这需要我手动将代码行添加到我不希望在 /dashboard.