page.js
页面是路由特有的 UI。
¥A page is UI that is unique to a route.
export default function Page({
params,
searchParams,
}: {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}) {
return <h1>My Page</h1>
}
export default function Page({ params, searchParams }) {
return <h1>My Page</h1>
}
属性
¥Props
params
(可选)
¥params
(optional)
包含从根段到该页的 动态路由参数 的对象。例如:
¥An object containing the dynamic route parameters from the root segment down to that page. For example:
示例 | 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
(可选)
¥searchParams
(optional)
包含当前 URL 的 搜索参数 的对象。例如:
¥An object containing the search parameters of the current URL. For example:
URL | searchParams |
---|---|
/shop?a=1 | { a: '1' } |
/shop?a=1&b=2 | { a: '1', b: '2' } |
/shop?a=1&a=2 | { a: ['1', '2'] } |
很高兴知道:
¥Good to know:
searchParams
是一个 动态 API,其值无法提前得知。使用它会在请求时将页面选择为 动态渲染。¥
searchParams
is a Dynamic API whose values cannot be known ahead of time. Using it will opt the page into dynamic rendering at request time.
searchParams
返回一个普通的 JavaScript 对象,而不是URLSearchParams
实例。¥
searchParams
returns a plain JavaScript object and not aURLSearchParams
instance.
版本历史
¥Version History
版本 | 变化 |
---|---|
v13.0.0 | page 推出。 |