页面（page）是与路由唯一对应的用户界面。
// app/blog/[slug]/page.tsx export default function Page({ params, searchParams, }: { params: { slug: string } searchParams: { [key: string]: string | string[] | undefined } }) { return <h1>My Page</h1> }
属性
params（可选）
包含从根段到该页面的动态路由参数的对象。例如：
| 示例 | URL | params |
|---|---|---|
app/shop/[slug]/page.js | /shop/1 | { slug: '1' } |
app/shop/[category]/[item]/page.js | /shop/1/2 | { category: '1', item: '2' } |
app/shop/[...slug]/page.js | /shop/1/2 | { slug: ['1', '2'] } |
searchParams（可选）
包含当前 URL 的搜索参数的对象。例如：
| URL | searchParams |
|---|---|
/shop?a=1 | { a: '1' } |
/shop?a=1&b=2 | { a: '1', b: '2' } |
/shop?a=1&a=2 | { a: ['1', '2'] } |
值得注意的是：
searchParams是一个 动态 API，其值在预渲染时无法确定。使用它将使页面在请求时采用 动态渲染。searchParams返回一个普通的 JavaScript 对象，而不是URLSearchParams实例。
版本历史
| 版本 | 变更 |
|---|---|
v13.0.0 | 引入了 page。 |