usePathname

usePathname es un hook de Componente Cliente que te permite leer el pathname de la URL actual.

'use client'

import { usePathname } from 'next/navigation'

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

'use client'

import { usePathname } from 'next/navigation'

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

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

Por ejemplo, un Componente 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 obtenerse. 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 Servidor. Este diseño es intencional para mantener el estado del diseño entre navegaciones de página.
• Modo de compatibilidad:
  • usePathname puede devolver null cuando se está renderizando una ruta de respaldo (fallback route) 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])
}