Menu
CoddyTech

回顾:路由

本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 10 课,共 47 课。

challenge icon

挑战

中等

本章回顾:运用本章学到的所有内容,把单页应用改成一个小型网站。

  1. 在 app/about/page.jsx(已在文件列表中)中,让组件返回一个带有 id="about-title" 的 <h1>,文本必须准确为 About us。
  2. 在 app/page.jsx 中,从 next/link 导入 Link,并添加一个指向 /about 且带有 id="to-about" 的链接。
  3. 动态路由 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>
    );
}

Next.js 基础中的所有课