useParams

useParams 是一個客戶端元件 (Client Component) 鉤子，可讓您讀取由當前 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 陣列，取決於動態區段的類型
如果路由不包含動態參數，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` 鉤子。

參數

返回值

版本歷史

On this page