page.js

前端开发

522

page.js

页面（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`。

EchoEcho官方

无论前方如何，请不要后悔与我相遇。

1377

发布数

439

关注者

2299189

累计阅读

page.js 9个月前

属性

params（可选）

searchParams（可选）

版本历史

热门教程文档