︙

useParams

useParamsは、現在の URL によって記入されたdynamic paramsを読み取ることができるClient Componentの hook です。

app/example-client-component.tsx

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

app/example-client-component.js

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

Parameters

const params = useParams();

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

Returns

useParamsは現在のルートのdynamic パラメーターを埋めた object を返します。

object 内の各プロパティはアクティブな dynamic セグメントです。
プロパティの名前はセグメントの名前であり、プロパティの value は、そのセグメントが何で埋められているかです。
プロパティの value は、type の dynamic セグメントによって、string または string の配列のどちらかになります。
もし route が dynamic パラメーターを含まない場合、useParamsは empty object を返します。
Pages Router で使用された場合、useParamsは初期の render 時にnullを返し、上記のルールに従ったプロパティで router が準備ができたら更新します。

For example:

Route	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'] }`

Version History

Version	Changes
`v13.3.0`	`useParams` 導入されました。