useParams

useParams 是一个客户端组件钩子，允许您读取路由的动态参数，这些参数由当前 URL 填充。

app/example-client-component.tsx

'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 '...'
}

参数

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`	`/shop/1/2`

{ slug: ['1', '2'] }

版本历史记录	版本
`更改`	v13.3.0