page.js
page
文件允许你定义对于路由唯一的 UI。你可以通过从文件中默认导出一个组件来创建页面:
app/blog/[slug]/page.tsx
TypeScript
export default function Page({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
return <h1>My Page</h1>
}
值得注意的是
- 可以为
page
使用.js
、.jsx
或.tsx
文件扩展名。 page
始终是路由子树的叶子节点。- 需要
page
文件才能使路由段公开可访问。 - 页面默认是 Server Components,但可以设置为 Client Component。
参考
Props
params
(可选)
一个 Promise,解析为包含从根段到该页面的动态路由参数的对象。
app/shop/[slug]/page.tsx
TypeScript
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const slug = (await params).slug
}
示例路由 | URL | params |
---|---|---|
app/shop/[slug]/page.js | /shop/1 | Promise<{ slug: '1' }> |
app/shop/[category]/[item]/page.js | /shop/1/2 | Promise<{ category: '1', item: '2' }> |
app/shop/[...slug]/page.js | /shop/1/2 | Promise<{ slug: ['1', '2'] }> |
- 由于
params
属性是一个 promise,你必须使用async/await
或 React 的use
函数来访问这些值。- 在版本 14 及更早版本中,
params
是一个同步属性。为了帮助向后兼容,在 Next.js 15 中你仍然可以同步访问它,但这种行为将在未来被弃用。
- 在版本 14 及更早版本中,
searchParams
(可选)
一个 promise,解析为包含当前 URL 的搜索参数的对象。例如:
app/shop/page.tsx
TypeScript
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const filters = (await searchParams).filters
}
示例 URL | searchParams |
---|---|
/shop?a=1 | Promise<{ a: '1' }> |
/shop?a=1&b=2 | Promise<{ a: '1', b: '2' }> |
/shop?a=1&a=2 | Promise<{ a: ['1', '2'] }> |
- 由于
searchParams
属性是一个 promise,你必须使用async/await
或 React 的use
函数来访问这些值。- 在版本 14 及更早版本中,
searchParams
是一个同步属性。为了帮助向后兼容,在 Next.js 15 中你仍然可以同步访问它,但这种行为将在未来被弃用。
- 在版本 14 及更早版本中,
searchParams
是一个**动态 API,其值无法提前知道。使用它将使页面在请求时采用动态渲染**。searchParams
是一个普通的 JavaScript 对象,不是URLSearchParams
实例。
示例
基于 params
显示内容
使用动态路由段,你可以基于 params
属性显示或获取页面的特定内容。
app/blog/[slug]/page.tsx
TypeScript
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
return <h1>Blog Post: {slug}</h1>
}
使用 searchParams
处理筛选
你可以使用 searchParams
属性基于 URL 的查询字符串处理筛选、分页或排序。
app/shop/page.tsx
TypeScript
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const { page = '1', sort = 'asc', query = '' } = await searchParams
return (
<div>
<h1>Product Listing</h1>
<p>Search query: {query}</p>
<p>Current page: {page}</p>
<p>Sort order: {sort}</p>
</div>
)
}
在 Client Components 中读取 searchParams
和 params
要在 Client Component(不能是 async
)中使用 searchParams
和 params
,你可以使用 React 的 use
函数来读取 promise:
app/page.tsx
TypeScript
'use client'
import { use } from 'react'
export default function Page({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const { slug } = use(params)
const { query } = use(searchParams)
}
版本历史
版本 | 变更 |
---|---|
v15.0.0-RC | params 和 searchParams 现在是 promise。提供了代码转换工具。 |
v13.0.0 | 引入 page 。 |