创建路由和布局

使用 page.js 定义静态路由

1// app/about/page.js
2export default function AboutPage() {
3  return <h1>关于我们</h1>;
4}

创建嵌套路由

1// app/about/team/page.js
2export default function TeamPage() {
3  return <h1>认识我们的团队</h1>;
4}

具有共享结构的根布局

1// app/layout.js
2export default function RootLayout({ children }) {
3  return (
4    <html>
5      <body>
6        <header>我的应用</header>
7        <main>{children}</main>
8        <footer>© 2025</footer>
9      </body>
10    </html>
11  );
12}

针对 /about 路由的特定区域布局

1// app/about/layout.js
2export default function AboutLayout({ children }) {
3  return (
4    <section>
5      <aside>关于菜单</aside>
6      <div>{children}</div>
7    </section>
8  );
9}

嵌套布局和页面文件定义 /about/team 路由

1app/
2  layout.js          --> 包裹整个应用
3  about/
4    layout.js        --> 包裹所有 /about/* 页面
5    page.js          --> /about 页面
6    team/
7      page.js        --> /about/team 页面

渲染树，展示在 /about/team 处布局和页面组件的嵌套方式

1<RootLayout>
2  <AboutLayout>
3    <TeamPage />
4  </AboutLayout>
5</RootLayout>

显示解决方案

让我们逐步实现 /team 部分，包含一个共享侧边栏布局和一个嵌套的 /team/roles 路由。

1. app/team/layout.js 文件

此文件定义了团队页面布局，渲染一个用于团队导航的侧边栏以及主内容区域。

定义带有导航和主内容区域的团队布局

1// app/team/layout.js
2export default function TeamLayout({ children }) {
3  return (
4    <section>
5      <aside>团队导航</aside>
6      <main>{children}</main>
7    </section>
8  );
9}

说明：

• 第 2 行： 我们导出一个布局函数，该函数被所有 /team 下的路由使用。

• 第 3–8 行： 该布局将所有子路由包裹在 <section> 中，其中包含一个侧边栏（<aside>）和一个 <main> 元素，用于渲染每个页面独有的内容。这种结构确保“团队导航”标签的侧边栏在所有 /team 路由中保持可见，而只有 <main> 内部的内容会随着用户在不同页面间切换而变化。

2. app/team/page.js 文件

此文件定义了团队首页，显示团队部分的欢迎标题。

定义显示欢迎信息的团队首页

1// app/team/page.js
2export default function TeamHomePage() {
3  return <h1>欢迎来到团队。</h1>;
4}

说明：

• 第 2–4 行： 此处定义了 /team 路由的页面内容。当访问 /team 时，此页面将在 app/team/layout.js 中定义的布局内渲染。

3. app/team/roles/page.js 文件

此文件定义了团队角色页面，显示团队角色部分的标题。

定义显示角色标题的团队角色页面

1// app/team/roles/page.js
2export default function RolesPage() {
3  return <h1>团队角色</h1>;
4}

说明：

• 第 2–4 行： 此处定义了一个位于 /team/roles 的嵌套页面。它会自动被 app/team/layout.js 中的相同布局包裹，因此侧边栏得以保留。