usePathname

usePathname ist ein Hook für Client-Komponenten, mit dem Sie den aktuellen Pfadnamen der URL auslesen können.

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Aktueller Pfadname: {pathname}</p>
}

usePathname erfordert absichtlich die Verwendung einer Client-Komponente. Es ist wichtig zu beachten, dass Client-Komponenten keine De-Optimierung darstellen. Sie sind ein integraler Bestandteil der Server-Komponenten Architektur.

Beispielsweise wird eine Client-Komponente mit usePathname beim ersten Seitenladen in HTML gerendert. Bei der Navigation zu einer neuen Route muss diese Komponente nicht erneut abgerufen werden. Stattdessen wird die Komponente einmal heruntergeladen (im Client-JavaScript-Bundle) und basierend auf dem aktuellen Zustand neu gerendert.

Hinweis:

• Das Auslesen der aktuellen URL aus einer Server-Komponente wird nicht unterstützt. Dieses Design ist absichtlich, um zu gewährleisten, dass der Layout-Zustand bei Seitennavigationen erhalten bleibt.
• Kompatibilitätsmodus:
  • usePathname kann null zurückgeben, wenn eine Fallback-Route gerendert wird oder wenn eine Seite aus dem pages-Verzeichnis von Next.js automatisch statisch optimiert wurde und der Router nicht bereit ist.
  • Bei Verwendung von usePathname mit Weiterleitungen in next.config oder Middleware müssen auch useState und useEffect verwendet werden, um Hydration-Abweichungsfehler zu vermeiden. Weitere Informationen finden Sie im Weiterleitungs-Beispiel.
  • Next.js aktualisiert Ihre Typen automatisch, wenn es sowohl ein app- als auch ein pages-Verzeichnis in Ihrem Projekt erkennt.

Parameter

const pathname = usePathname()

usePathname nimmt keine Parameter an.

Rückgabewert

usePathname gibt einen String des aktuellen Pfadnamens der URL zurück. Beispiele:

Beispiele

Auf Routenänderung reagieren

'use client'
 
import { usePathname, useSearchParams } from 'next/navigation'
 
function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Hier etwas machen...
  }, [pathname, searchParams])
}