jsschools

usePathname()

Client hook returning the current URL pathname.

Since Next 13 (App Router) Spec ↗

Syntax

import { usePathname } from 'next/navigation'; const pathname = usePathname()

Returns

string — The current pathname (without query or hash).

Examples

'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

export function NavItem({ href, label }) {
  const pathname = usePathname()
  const active = pathname === href
  return (
    <Link href={href} aria-current={active ? 'page' : undefined}>
      {label}
    </Link>
  )
}

'use client'
import { usePathname } from 'next/navigation'
import { useEffect } from 'react'

export function Analytics() {
  const pathname = usePathname()
  useEffect(() => {
    track('pageview', { pathname })
  }, [pathname])
  return null
}

Notes

Client Components only — requires `'use client'`. Returns just the pathname; use `useSearchParams()` for the query string. The component using it should be wrapped in `<Suspense>` if it could be statically rendered, to avoid deopting the whole page.

See also