useParams

useParams 是一個客戶端元件 hook，可讓您讀取由目前網址填入的路由動態參數。

'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 會返回一個空物件。
• 如果在 Pages Router 中使用，useParams 在初始渲染時會返回 null，並在路由準備就緒後根據上述規則以屬性進行更新。

例如：

路由	網址	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'] }