回顾:路由
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 10 课,共 47 课。
挑战
中等本章回顾:运用本章学到的所有内容,把单页应用改成一个小型网站。
- 在
app/about/page.jsx(已在文件列表中)中,让组件返回一个带有id="about-title"的<h1>,文本必须准确为About us。 - 在
app/page.jsx中,从next/link导入Link,并添加一个指向/about且带有id="to-about"的链接。 - 动态路由
app/menu/[slug]/page.jsx已经存在,但始终显示pizza。将其组件设为async,使其等待params,并在带有id="dish"的<h1>中渲染匹配的slug。
测试会点击你的链接,然后访问两道不同的菜,并期待看到两个不同的标题。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}