jsschools

useParams()

Client hook returning the dynamic route parameters of the current URL.

Since Next 13.3 (App Router) Spec ↗

Syntax

import { useParams } from 'next/navigation'; const params = useParams()

Returns

Record<string, string | string[]> — The current route's dynamic params.

Examples

'use client'
import { useParams } from 'next/navigation'

// Route: app/blog/[slug]/page.tsx
export function ShareButton() {
  const params = useParams<{ slug: string }>()
  const url = `https://example.com/blog/${params.slug}`
  return <button onClick={() => navigator.clipboard.writeText(url)}>Share</button>
}

'use client'
import { useParams } from 'next/navigation'

// Catch-all route: app/shop/[...path]/page.tsx
export function Crumbs() {
  const { path } = useParams<{ path: string[] }>()
  return <span>{path?.join(' / ')}</span>
}

Notes

Client Components only. For Server Components, use the async `params` prop of the page/layout instead (awaited in Next 15). Catch-all segments return string arrays. Empty object when no dynamic params.

See also