Skip to content

    useParams

    useParams is a Client Component hook that lets you read a route's dynamic params filled in by the current URL.

    Note: Support for useParams is added in Next.js 13.3.

    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 does not take any parameters.

    Returns

    useParams returns an object containing the current route's filled in dynamic 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 a string or array of string's depending on the type of dynamic segment.
    • If the route contains no dynamic parameters, useParams returns an empty object.
    • If used in pages, useParams will return null.

    For example:

    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'] }

    Was this helpful?