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を返し、ルーターが準備されると上記のルールに従ってプロパティを更新します。

例

バージョン履歴