useParams

useParams 是一个 客户端组件 (Client Component) Hook，用于读取当前 URL 填充的动态参数 (dynamic params)。

'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 返回一个包含当前路由已填充动态参数 (dynamic parameters) 的对象。

对象中的每个属性都是一个活跃的动态段 (dynamic segment)
属性名对应动态段名称，属性值为动态段填充的实际值
属性值可能是 string 或 string[] 类型，具体取决于动态段类型 (type of dynamic segment)
如果路由不包含动态参数，useParams 返回空对象 {}
在页面路由 (Pages Router) 中使用时，初始渲染会返回 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` Hook

参数

返回值

版本历史

On this page