Skip to main content
useParams is a Client Component hook that lets you read a route’s dynamic parameters as filled in by the current URL.
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 '...'
}

​
Parameters

useParams takes no parameters.

​
Returns

An object containing the current route’s filled-in dynamic segments.
  • Each key is a dynamic segment name.
  • Each value is a string (for [param]) or string[] (for [...param]).
  • Returns an empty object {} if the route has no dynamic segments.
  • Returns null when used in the Pages Router before the router is ready.
RouteURLuseParams()
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'] }

​
Example

app/product/[id]/edit/page.tsx
'use client'

import { useParams } from 'next/navigation'

export default function EditPage() {
  // For route /product/[id]/edit with URL /product/abc123/edit
  const { id } = useParams<{ id: string }>()

  return <p>Editing product: {id}</p>
}

​
Version history

VersionChanges
v13.3.0useParams introduced.

Build docs developers (and LLMs) love

Get started for freeTalk to us