usePathname

usePathname ist ein Client Component-Hook, der es ermöglicht, den Pfadnamen der aktuellen URL auszulesen.

'use client'

import { usePathname } from 'next/navigation'

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

'use client'

import { usePathname } from 'next/navigation'

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

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

Beispielsweise wird eine Client Component mit usePathname beim initialen Seitenaufruf 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.

Wissenswert:

• Das Auslesen der aktuellen URL aus einer Server Component wird nicht unterstützt. Dieses Design ist bewusst gewählt, um den Layout-Zustand über Seiten-Navigationen hinweg zu erhalten.
• Kompatibilitätsmodus:
  • usePathname kann null zurückgeben, wenn eine Fallback-Route gerendert wird oder wenn eine pages-Verzeichnisseite durch Next.js automatisch statisch optimiert wurde und der Router noch nicht bereit ist.
  • Next.js aktualisiert automatisch Ihre Typen, wenn sowohl ein app- als auch ein pages-Verzeichnis in Ihrem Projekt erkannt werden.

Parameter

const pathname = usePathname()

usePathname nimmt keine Parameter entgegen.

Rückgabewert

usePathname gibt einen String mit dem Pfadnamen der aktuellen URL zurück. Zum Beispiel:

Beispiele

Aktion bei Routenänderung ausführen

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Hier Aktion ausführen...
  }, [pathname, searchParams])
}

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Hier Aktion ausführen...
  }, [pathname, searchParams])
}