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

in>님의 Navbar 是一个 客户端组件 a>，您可以避免使用路由组，但能够通过使用 usePathname来阻止它显示在 /dashboard에게 다음과 같이 감사드립니다.

으아아아

Answer 2

몇 가지 조사 끝에 루트 그룹과 함께 작동하도록 만들었습니다.

파일 구조

/app/layout.tsx

으아악

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

으아악

/app/(登陆)/layout.tsx

으아악

Youssouf의 솔루션은 훌륭하게 작동합니다. 그러나 대시보드 경로에는 여전히 rootlayout CSS 样式和其他组件，这需要我手动将代码行添加到我不希望在 /dashboard에 표시된 구성 요소가 있습니다.