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> ); }
Merci à votre
Navbar
是一个 客户端组件 a>,您可以避免使用路由组,但能够通过使用usePathname
来阻止它显示在/dashboard
in>, likez ceci :Après quelques recherches, j'ai réussi à le faire fonctionner avec des groupes de routes.
Structure des fichiers
/app/layout.tsx
/app/(破折号)/dashboard/layout.tsx
/app/(登陆)/layout.tsx
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
.