usePathname

usePathname est un hook réservé aux Composants Client qui permet de lire le chemin (pathname) de l'URL actuelle.

'use client'

import { usePathname } from 'next/navigation'

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

usePathname nécessite intentionnellement l'utilisation d'un Composant Client. Il est important de noter que les Composants Client ne sont pas une désoptimisation. Ils font partie intégrante de l'architecture des Composants Serveur.

Par exemple, un Composant Client utilisant usePathname sera rendu en HTML lors du chargement initial de la page. Lors de la navigation vers une nouvelle route, ce composant n'a pas besoin d'être rechargé. Au lieu de cela, le composant est téléchargé une fois (dans le bundle JavaScript client) et se rerend en fonction de l'état actuel.

Bon à savoir :

• La lecture de l'URL actuelle depuis un Composant Serveur n'est pas prise en charge. Cette conception est intentionnelle pour préserver l'état du layout lors des navigations entre pages.
• Mode de compatibilité :
  • usePathname peut retourner null lorsqu'une route de fallback est en cours de rendu ou lorsqu'une page du répertoire pages a été optimisée statiquement automatiquement par Next.js et que le routeur n'est pas prêt.
  • Lors de l'utilisation de usePathname avec des rewrites dans next.config ou Middleware, useState et useEffect doivent également être utilisés pour éviter les erreurs d'hydratation.
  • Next.js mettra automatiquement à jour vos types s'il détecte à la fois un répertoire app et pages dans votre projet.

Paramètres

const pathname = usePathname()

usePathname ne prend aucun paramètre.

Valeur retournée

usePathname retourne une chaîne représentant le chemin de l'URL actuelle. Par exemple :

Exemples

Effectuer une action en réponse à un changement de route

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Effectuez une action ici...
  }, [pathname, searchParams])
}