useParams

useParams は、現在の URL によって埋められたルートの動的パラメータを読み取ることができる Client Component フックです。

'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 は空のオブジェクトを返します。
• Pages Router で使用する場合、useParams は初回レンダリング時に null を返し、ルーターの準備ができたら上記のルールに従ってプロパティで更新されます。

例：

バージョン履歴