usePathname

usePathname est un hook pour les Composants Client qui permet de lire le 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>
}

'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 avec 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 récupéré à nouveau. 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.
  • 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 pathname 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(() => {
    // Faire quelque chose ici...
  }, [pathname, searchParams])
}

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Faire quelque chose ici...
  }, [pathname, searchParams])
}