未找到页面
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 9 课，共 47 课。
动态路由有时会宽容过头。app/menu/[slug]/page.jsx 会匹配 /menu/pizza，也会同样轻松地匹配 /menu/asdfgh，然后为一道不存在的菜渲染菜品页面。
Next.js 为你提供了这项修复的两个部分。
1. 404 页面。名为 not-found.jsx 的文件，和 page.jsx、layout.jsx 一样，属于特殊文件名阵营：
// app/not-found.jsx
export default function NotFound() {
return <h1>We don't have that</h1>;
}把它放在 app/not-found.jsx 中，它就会覆盖整个应用：所有没有匹配项的 URL 都会显示在这里，而不是显示默认的 404 页面。
2. 触发方式。有时，URL 与某个路由匹配，但数据不存在。这就是 /menu/asdfgh 这种情况，只有你的代码能判断。调用 notFound()：
import { notFound } from 'next/navigation';
const dishes = ['pizza', 'pasta'];
export default async function Dish({ params }) {
const { slug } = await params;
if (!dishes.includes(slug)) {
notFound();
}
return <h1>{slug}</h1>;
}notFound() 不会返回值，你也不会返回它：调用它会立即停止页面，并显示最近的 not-found.jsx。if 后面的所有代码都可以放心地假设这道菜确实存在，所以要把这个保护判断放在最前面。
挑战
中等/menu/sushi目前会为一道不在菜单上的菜品渲染菜品页面。请修复这个漏洞。
- 完成文件
app/not-found.jsx。默认导出一个组件，该组件返回一个带有id="not-found-title"的<h1>，其中的文本必须与Dish not found完全一致。 - 在
app/menu/[slug]/page.jsx中，从next/navigation导入notFound。 - 如果
slug不在dishes数组中，请在渲染任何内容之前调用notFound()。
/menu/pizza 必须仍然可以正常使用。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
