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

有没有办法防止 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>
  );
}

"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

; }

全部回复(2)

P粉9820544492024-03-27 09:56:37 2楼

由于您的 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;
}

赞 +0

添加回复

P粉8072394162024-03-27 09:09:48 1楼

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

文件结构

/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 中显示的组件。