Next.js 13：如何基于路由层级自定义app目录下的布局？

在App目录的路由规则里，子路由默认会继承父级的layout.tsx，要实现子级路径用不同布局，直接在子路由层级创建独立的layout.tsx即可，具体步骤如下：

1. 调整路由目录结构 #

假设你当前的目录结构是这样的：

app/
  problems/
    [slug]/
      layout.tsx  # 一级路径（如/problems/react）的侧边栏布局
      page.tsx    # 一级路径的内容页面

现在给子级路由test-problem创建独立的布局文件，结构变成：

app/
  problems/
    [slug]/
      layout.tsx
      page.tsx
      test-problem/
        layout.tsx  # 子级路径的自定义布局
        page.tsx    # 子级路径的内容页面

2. 编写子级布局文件 #

子级的layout.tsx不需要依赖父级布局，直接编写你需要的结构即可，这样就会完全替代父级的侧边栏布局，同时仍会继承更上层的根布局（app/layout.tsx）。示例代码：

// app/problems/[slug]/test-problem/layout.tsx
export default function TestProblemLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="custom-test-layout">
      {/* 这里写子级路径需要的布局结构，比如仅展示内容区域 */}
      <main>{children}</main>
    </div>
  );
}

3. 灵活适配多场景（可选） #

如果部分子路由需要保留父级布局，部分不需要，可以把父级布局的核心内容封装成独立组件：

• 在problems/[slug]/components下创建ProblemBaseLayout.tsx，把侧边栏+内容区域的逻辑放在这里
• 父级的layout.tsx直接引入这个组件
• 需要保留布局的子路由，在自己的layout.tsx里引入ProblemBaseLayout；不需要的子路由则完全自定义布局

内容的提问来源于stack exchange，提问作者NIsham Mahsin