NextJS中文文档 - Use Params
useParams
是一个客户端组件钩子,让你可以读取由当前 URL 填充的路由动态参数。
tsx
'use client'
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams<{ tag: string; item: string }>()
// 路由 -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return '...'
}
jsx
'use client'
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams()
// 路由 -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return '...'
}
参数
tsx
const params = useParams()
useParams
不接受任何参数。
返回值
useParams
返回一个包含当前路由填充的动态参数的对象。
- 对象中的每个属性都是一个活动的动态段。
- 属性名是段的名称,属性值是段被填充的内容。
- 属性值将是一个
string
或string
数组,取决于动态段的类型。 - 如果路由不包含动态参数,
useParams
返回一个空对象。 - 如果在 Pages Router 中使用,
useParams
在初始渲染时将返回null
,并在路由器准备好后更新为遵循上述规则的属性。
例如:
路由 | URL | useParams() |
---|---|---|
app/shop/page.js | /shop | {} |
app/shop/[slug]/page.js | /shop/1 | { slug: '1' } |
app/shop/[tag]/[item]/page.js | /shop/1/2 | { tag: '1', item: '2' } |
app/shop/[...slug]/page.js | /shop/1/2 | { slug: ['1', '2'] } |
版本历史
版本 | 变更 |
---|---|
v13.3.0 | 引入 useParams 。 |