大家好，我是1024小神，技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。 如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~
在目前常见的中后台管理系统中，比较常见的是固定的布局方式包裹页面，但一些特殊页面，比如：登录页面、注册页面、忘记密码页面这些页面是不需要布局包裹的。next默认在app目录有一个全局的layout布局文件，所有的页面都会被这个布局包裹，然后展示，其中详细的原理可以看官网介绍：nextjs.org/docs/app/ge…
但是实际情况就有可能主页面和大部分页面都带有全局的头部组建：
但是登陆页或个人中心等页面的布局是不一样的，或者甚至没有头部组建：
我们希望这些特殊页面不需要父级 layout 包裹，那这个问题该怎么去解决呢？
解决方案大概有三个
1.如果你不嫌麻烦，RootLayout 根布局留空，然后在需要的页面下都新建一个 layout.tsx 文件。
这种方式相当麻烦，每个页面都要单独搞一个布局文件，很繁琐，不推荐
app/
├─ layout.tsx // 全局 layout，里面只有空白的html和body
├─ page.tsx // 首页
└─ login/
└─ page.tsx // 登录页
└─ layout.tsx. // 登陆页布局2.使用独立的路由分组，比如空白布局单独一个路由布局，通用的路由单独一个路由布局
这种方式结构目录应该是比较清晰的，就是把不同的页面结构进行了分组，然后根据不同的分组展示不同的布局结构。我更推荐使用这种方式，我的项目就是这样。
app/
├─ (main)/
│ ├─ layout.tsx // 主站 layout
│ ├─ page.tsx
│ └─ dashboard/page.tsx
└─ (auth)/
├─ page.tsx // 登陆页
└─ layout.tsx。 // 另外一个分组的布局3.条件判断式 layout，根据路由地址，在布局结构中动态判断要展示哪些布局组建
这种就是在根布局中，通过判断路由路径，来动态控制展示哪些布局组建，相当于条件判断。也不推荐使用，因为每次路由跳转，都需要动态判断一次，会影响网站性能
// app/layout.tsx
import { usePathname } from 'next/navigation'
export default function RootLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname()
const isLogin = pathname === '/login'
return (
<html lang="en">
<body>
{!isLogin && <Header />}
{children}
{!isLogin && <Footer />}
</body>
</html>
)
}
