usePathname

usePathname es un hook para Componentes de Cliente que permite leer el pathname de la URL actual.

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Pathname actual: {pathname}</p>
}

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Pathname actual: {pathname}</p>
}

usePathname requiere intencionalmente el uso de un Componente de Cliente. Es importante destacar que los Componentes de Cliente no son una desoptimización. Son parte integral de la arquitectura de Componentes de Servidor.

Por ejemplo, un Componente de Cliente con usePathname se renderizará en HTML durante la carga inicial de la página. Al navegar a una nueva ruta, este componente no necesita volver a ser solicitado. En su lugar, el componente se descarga una vez (en el paquete JavaScript del cliente) y se vuelve a renderizar según el estado actual.

Dato importante:

• No se admite leer la URL actual desde un Componente de Servidor. Este diseño es intencional para mantener el estado del layout entre navegaciones de página.
• Modo de compatibilidad:
  • usePathname puede devolver null cuando se está renderizando una ruta de fallback o cuando una página del directorio pages ha sido optimizada estáticamente de forma automática por Next.js y el enrutador no está listo.
  • Next.js actualizará automáticamente tus tipos si detecta tanto un directorio app como pages en tu proyecto.

Parámetros

const pathname = usePathname()

usePathname no acepta ningún parámetro.

Valores devueltos

usePathname devuelve una cadena con el pathname de la URL actual. Por ejemplo:

Ejemplos

Realizar una acción en respuesta a un cambio de ruta

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Hacer algo aquí...
  }, [pathname, searchParams])
}

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Hacer algo aquí...
  }, [pathname, searchParams])
}