嵌套布局（Nested Layout）

大多数时候，很适合将布局相互嵌套。 一个页面的内容可以嵌套在许多布局中。

src/
└── routes/
    ├── layout.tsx           # Parent layout
    └── about/
        ├── layout.tsx       # Child layout
        └── index.tsx        # https://example.com/about

在上面的例子中，有两个布局应用于 /about 页面组件。

1. src/routes/layout.tsx
2. src/routes/about/layout.tsx

在这种情况下，多个layouts将相互嵌套。

┌────────────────────────────────────────────────┐
│       src/routes/layout.tsx                    │
│  ┌──────────────────────────────────────────┐  │
│  │    src/routes/about/layout.tsx           │  │
│  │  ┌────────────────────────────────────┐  │  │
│  │  │ src/routes/about/index.tsx         │  │  │
│  │  │                                    │  │  │
│  │  └────────────────────────────────────┘  │  │
│  │                                          │  │
│  └──────────────────────────────────────────┘  │
│                                                │
└────────────────────────────────────────────────┘

// File: src/routes/layout.tsx
export default component$(() => {
  return (
    <main>
      <Slot /> {/* <== Child layout/route inserted here */}
    </main>
  );
});

// File: src/routes/about/layout.tsx
export default component$(() => {
  return (
    <section>
      <Slot /> {/* <== Child layout/route inserted here */}
    </section>
  );
});

// File: src/routes/about/index.tsx
export default component$(() => {
  return <h1>About</h1>;
});

上面例子会渲染下面的HTML：

<main>
  <section>
    <h1>About</h1>
  </section>
</main>

默认情况下，页面将通过向上递归每个目录直到到达 /src/routes 目录来创建其布局堆栈。 如果在任何时候想让它停止向上递归目录，您可以使用 top layout 功能。