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>
}

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 cargarse. 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.

Es bueno saber:

• 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.
  • Al usar usePathname con reescrituras en next.config o Middleware, también se deben usar useState y useEffect para evitar errores de desajuste en la hidratación.
  • 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])
}