useParams

useParams is aClient Component hook that lets you read a route'sdynamic params filled in by the current URL.

'use client'import { useParams }from'next/navigation'exportdefaultfunctionExampleClientComponent() {constparams=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

constparams=useParams()

useParams does not take any parameters.

Returns

useParams returns an object containing the current route's filled indynamic parameters.

• Each property in the object is an active dynamic segment.
• The properties name is the segment's name, and the properties value is what the segment is filled in with.
• The properties value will either be astring or array ofstring's depending on thetype of dynamic segment.
• If the route contains no dynamic parameters,useParams returns an empty object.
• If used in Pages Router,useParams will returnnull on the initial render and updates with properties following the rules above once the router is ready.

For example:

Version History