等待路由参数
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 24 课，共 47 课。
动态路由会通过 params 将 URL 片段传递给你的页面。在 Next 15 中，有一个值得记住的注意点：
params 是一个 Promise。
// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
const { slug } = await params;
// /menu/carbonara -> slug === 'carbonara'
}忘了写 await 也不会导致程序崩溃，这正是它容易让人忽略的原因。解构 Promise 只会得到 undefined：
const { slug } = params; // undefined
const dish = await getDish(slug); // 什么也查不到页面仍然可以渲染。只是页面空白，或者满是备用内容，于是你开始在数据层里寻找一个根本不存在的 bug。
同样的规则也适用于 searchParams。它们都是 Promise，都需要等待，而且都只能在 async 服务器组件中使用，这也是你刚才编写的页面必须是异步组件的另一个原因。
为什么要使用 promise？这样 Next.js 就可以先开始渲染页面中不依赖 URL 的部分，不必等到确定依赖 URL 的部分后再开始。
挑战
简单app/menu/[slug]/page.jsx 差不多正确，但它从未等待 params，所以每道菜都会显示为 Unknown dish。
- 在解构之前等待
params：const { slug } = await params;
lib/data.js 和主页已锁定。访问 /menu/carbonara 时，必须在 #dish-name 中显示 Carbonara，并在 #dish-price 中显示它的价格。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
