布局（Layout）

在实现路由时，不同的路由通常共享一个共同的页眉、页脚和菜单系统。我们称公共部分为布局（layout）。

开发人员可以将所有这些提取到 <Header>、<Footer> 和 <Menu> 组件中，并手动将它们添加到每个页面组件中，但这是重复且容易出错的。 相反，我们可以使用布局（Layout）来自动重用公共部分。

例子

假设我们希望我们的网站看起来像这样：

┌───────────────────────────────────────────────────┐
│ Header                                            │
├─────────┬─────────────────────────────────────────┤
│ Menu    │ <ROUTE_SPECIFIC_CONTENT>                │
│ - home  │                                         │
│ - about │                                         │
│         │                                         │
├─────────┴─────────────────────────────────────────┤
│ Footer                                            │
└───────────────────────────────────────────────────┘

我们可以用这些文件定义上述内容：

src/
├── components/
│   ├── header.tsx         # Header component implementation
│   ├── footer.tsx         # Footer component implementation
│   └── menu.tsx           # Menu component implementation
└── routes/
    ├── layout.tsx         # Layout implementation using: <Header>, <Footer>, and <Menu>
    ├── about/
    │   └── index.tsx      # https://example.com/about
    └── index.tsx          # https://example.com

组件实现

// File: src/components/header.tsx
export default component$(() => {
  return <>Header</>;
});

// File: src/components/footer.tsx
export default component$(() => {
  return <>Footer</>;
});

// File: src/components/menu.tsx
export default component$(() => {
  return (
    <ul>
      <li>home</li>
      <li>about</li>
    </ul>
  );
});

// File: src/routes/layout.tsx
export default component$(() => {
  return (
    <>
      <Header />
      <Menu />
      <Slot/> {/* <== This is where the route will be inserted */}
      <Footer />
    </>
  );
});

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

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