useParams 是一个客户端组件 (Client Component) Hook,它允许你读取由当前 URL 填充的路由动态参数。
'use client'
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams<{ tag: string; item: string }>()
// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return '...'
}'use client'
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams()
// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return '...'
}const params = useParams()useParams 不接受任何参数。
useParams 返回一个对象,其中包含当前路由填充的动态参数。
string 类型或 string 数组,具体取决于动态分段的类型。useParams 将返回一个空对象。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 已引入。 |