useParams

useParams は、現在の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 は空のオブジェクトを返します
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