メインコンテンツまでスキップ

useParams

useParamsClient Componentのフックであり、現在の URL の動的パラメータを読み取ることができます。

app/example-client-component.tsx
'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は、現在のルートの動的パラメータを含むオブジェクトを返します。

  • オブジェクトの各プロパティはアクティブな動的 Segment です。
  • プロパティ名は Segment の名前を示し、プロパティの値は該当の Segment に割り当てられた内容となります。
  • プロパティの値は、動的 Segment のタイプに応じて、文字列か文字列の配列になります。
  • ルートに動的パラメータが含まれていない場合、useParamsは空のオブジェクトを返します。
  • pagesで使用された場合、useParamsnullを返します。

例えば:

RouteURLuseParams()
app/shop/page.js/shopnull
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 履歴

VersionChanges
v13.3.0useParams 導入