Le composant de présentation racine peut-il être masqué dans certaines routes imbriquées dans le dossier d'application Next.js ?

Question

Y a-t-il un moyen de prévenir rootlayout 被 dashboardlayout 包裹？ Next.js v13 Documentation :

Structure de mon fichier :

Je pourrais utiliser des groupes de routes ; cependant, cela désactiverait le bouclage dans mes contact、pricing routes. Existe-t-il un moyen d'empêcher que cela se produise ? Je souhaite que la barre de navigation d'accueil soit sur les pages d'informations de contact et de tarification, mais je ne veux pas que la barre de navigation d'accueil soit sur le tableau de bord.

J'ai essayé d'utiliser des groupes de routage ; cependant, cela a désactivé l'encapsulation de mes itinéraires de tarification et de contact.

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

Merci à votre Navbar 是一个 客户端组件，您可以避免使用路由组，但能够通过使用 usePathname/dashboardin>, likez ceci :

"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

Après quelques recherches, j'ai réussi à le faire fonctionner avec des groupes de routes.

Structure des fichiers

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

La solution de Youssouf fonctionne très bien. Cependant, l'itinéraire du tableau de bord contient toujours les composants affichés en rootlayout CSS 样式和其他组件，这需要我手动将代码行添加到我不希望在 /dashboard.