usePathname

The usePathname hook allows you to read the current URL pathname from a Client Component.

app/page.tsx
'use client';

import { usePathname } from 'next/navigation';

export default function Page() {
  // When URL is /blog/hello, pathname = '/blog/hello'
  // When URL is /dashboard?v=2, pathname = '/dashboard'
  const pathname = usePathname();
  return <div>{pathname}</div>;
}

Good to know: