page.js

页面是指与路由一一对应的用户界面。

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page</h1>
}

属性参数

params (可选)

包含从根段到当前页面的动态路由参数的对象。例如:

示例URLparams
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 的查询参数的对象。例如:

URLsearchParams
/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 功能。

On this page