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 '...'
}

パラメータ

const params = useParams()

useParams はパラメータを受け取りません。

戻り値

useParams は、現在のルートで設定された動的パラメータを含むオブジェクトを返します。

• オブジェクトの各プロパティはアクティブな動的セグメントです
• プロパティ名はセグメント名、プロパティ値はセグメントに設定された値です
• プロパティ値は動的セグメントのタイプに応じて string または string の配列になります
• ルートに動的パラメータが含まれていない場合、useParams は空のオブジェクトを返します
• Pages Router で使用した場合、useParams は初期レンダリング時に null を返し、ルーターの準備が整った後に上記のルールに従ってプロパティを含むオブジェクトを返します

例:

バージョン履歴