Next.js 14 App Router下如何在Admin页面隐藏主布局？

方案1：给Admin路由做独立布局（首推） #

如果你的Admin是顶级路由（比如/admin），直接在app/admin文件夹下创建layout.tsx。这个布局会自动替代根布局，里面只写Admin页面需要的基础结构，不用包含navbar和footer。

示例代码：

// app/admin/layout.tsx
export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

这种方式完全贴合App Router的设计逻辑，是官方推荐的做法。每个路由分支有独立的布局，隔离性强，后续给Admin加专属侧边栏、全局样式这类扩展也非常方便。

方案2：根布局里判断路由路径（适合简单场景） #

要是不想新增布局文件，也可以在根布局里用usePathname()判断当前路径是否属于Admin，从而决定是否渲染navbar和footer。

示例代码：

// app/layout.tsx
import { usePathname } from 'next/navigation';
import Navbar from './components/Navbar';
import Footer from './components/Footer';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const isAdminPage = pathname.startsWith('/admin');

  return (
    <html lang="zh-CN">
      <body>
        {!isAdminPage && <Navbar />}
        {children}
        {!isAdminPage && <Footer />}
      </body>
    </html>
  );
}

这种方式适合项目初期、Admin页面不多的简单场景，但如果Admin路由分支变多，根布局里的判断逻辑会越来越杂，扩展性不如方案1。

方案3：用路由组隔离不同布局 #

如果想把普通页面和Admin页面的布局彻底拆分管理，可以用路由组。创建app/(main)存放普通页面（带navbar/footer的布局），app/(admin)存放Admin页面（不带的布局），最外层根布局只负责最基础的html/body结构。

目录结构示例：

app/
├── (main)/
│   ├── layout.tsx  # 包含Navbar和Footer的普通页面布局
│   ├── page.tsx
│   └── about/
│       └── page.tsx
├── (admin)/
│   ├── layout.tsx  # Admin页面专属基础布局
│   ├── page.tsx
│   └── dashboard/
│       └── page.tsx
└── layout.tsx  # 最外层根布局，仅包裹html和body

这种方式能让路由结构更清晰，后续新增其他布局分支（比如会员专属页面）也很好扩展，同样是官方认可的模式。

内容的提问来源于stack exchange，提问作者willm berchiche