Next.js 14 App Router：如何隐藏/dashboard/create页面的主布局？

方案1：在根布局中根据路径动态判断（推荐） #

根目录的layout.tsx是全局布局，所有页面默认都会嵌套其中。我们可以通过路由路径判断，让/dashboard/create页面跳过主布局的渲染：

步骤1：区分服务器/客户端组件处理根布局

如果你的根布局是客户端组件（已添加'use client'），直接修改如下：

'use client';
import { usePathname } from 'next/navigation';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  // 匹配/dashboard/create及其子页面（如/dashboard/create/step1）
  const isCreateRoute = pathname.startsWith('/dashboard/create');

  if (isCreateRoute) {
    // 跳过主布局，直接返回页面内容
    return <html lang="zh-CN"><body>{children}</body></html>;
  }

  // 原主布局代码
  return (
    <html lang="zh-CN">
      <body>
        <header>全局导航栏</header>
        <aside>侧边栏</aside>
        <main>{children}</main>
      </body>
    </html>
  );
}

如果根布局是服务器组件（无'use client'），需把路径判断逻辑抽离到客户端组件中：

1. 创建app/ClientLayoutWrapper.tsx（客户端组件）：

'use client';
import { usePathname } from 'next/navigation';

export default function ClientLayoutWrapper({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const isCreateRoute = pathname.startsWith('/dashboard/create');

  if (isCreateRoute) {
    return <>{children}</>;
  }

  return (
    <>
      <header>全局导航栏</header>
      <aside>侧边栏</aside>
      <main>{children}</main>
    </>
  );
}

2. 修改根layout.tsx：

import ClientLayoutWrapper from './ClientLayoutWrapper';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <ClientLayoutWrapper>{children}</ClientLayoutWrapper>
      </body>
    </html>
  );
}

方案2：取消嵌套dashboard层级的布局（可选） #

如果/dashboard/create不仅要隐藏根布局，还不需要dashboard/layout.tsx的布局，可修改dashboard/create/layout.tsx：

export default function CreateLayout({ children }: { children: React.ReactNode }) {
  // 直接返回页面内容，不继承dashboard的布局
  return <>{children}</>;
}

原理说明 #

Next.js App Router的布局是自上而下嵌套的：根layout → dashboard/layout → create/layout → create/page。通过路径判断跳过根布局的UI渲染，同时让create层级的布局直接返回子内容，就能实现完全隐藏主布局的效果。

内容的提问来源于stack exchange，提问作者Jinho KIM