嵌套路由
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 6 课，共 47 课。
现在动手吧。向 Next.js 应用添加页面只需两步：创建一个文件夹，再在里面放入一个 page.jsx。
// app/about/page.jsx -> /about
export default function About() {
return <h1>About us</h1>;
}这就是整个文件。不需要更新路由表，也不需要在其他地方导入，更不用重启。这个组件就是普通的 React 组件。让它变成 URL 的唯一原因，是你保存它的位置。
有两点值得记住：
- 它必须是默认导出：Next.js 会通过它从文件中识别页面组件。
- 组件的名称由你决定。
About、AboutPage、Whatever都可以：URL 由文件夹决定，与函数名称无关。
也想要 /about/team 吗？创建 app/about/team/，并在里面放入另一个 page.jsx。随着网站不断扩展，这个模式也不会改变，这正是它的好处。
挑战
入门这个应用有一个主页。为它添加一个关于页面。
- 完成文件
app/about/page.jsx。 - 从中默认导出一个组件。
- 它必须返回一个带有
id="about-title"且文本完全为About us的<h1>。
不要改动 app/page.jsx：测试会访问这两个 URL。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
