useParams
useParamsは、現在のURLによって入力されたルートの動的パラメータを読み取ることができるクライアントコンポーネントフックです。
app/example-client-component.tsx
TypeScript
'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を返し、ルーターの準備ができた後、上記のルールに従ってプロパティを更新します。
例：
| 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 | Changes |
|---|---|
v13.3.0 | 導入時期：useParams |