Skip to content

    usePathname

    usePathname is a Client Component hook that lets you read the current URL's pathname.

    app/example-client-component.tsx
    'use client';
     
    import { usePathname } from 'next/navigation';
     
    export default function ExampleClientComponent() {
      const pathname = usePathname();
      return <>Current pathname: {pathname}</>;
    }

    Good to know:

    Parameters

    const pathname = usePathname();

    usePathname does not take any parameters.

    Returns

    usePathname returns a string of the current URL's pathname. For example:

    URLReturned value
    /'/'
    /dashboard'/dashboard'
    /dashboard?v=2'/dashboard'
    /blog/hello-world'/blog/hello-world'

    Examples

    Do something in response to a route change

    app/example-client-component.tsx
    'use client';
     
    import { usePathname, useSearchParams } from 'next/navigation';
     
    function ExampleClientComponent() {
      const pathname = usePathname();
      const searchParams = useSearchParams();
      useEffect(() => {
        // Do something here...
      }, [pathname, searchParams]);
    }

    Was this helpful?