usePathname

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

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

Good to know:

• usePathname is a Client Component hook and is not supported in Server Components.
• Compatibility mode:
  • usePathname can return null when a fallback route is being rendered or when a pages directory page has been automatically statically optimized by Next.js and the router is not ready.
  • Next.js will automatically update your types if it detects both an app and pages directory in your project.

Parameters

const pathname = usePathname();

usePathname does not take any parameters.

Returns

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

Examples

Do something in response to a route change

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