usePathname

usePathname ist ein Client Component-Hook, der es Ihnen 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 ersten Laden der Seite 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 Seite aus dem pages-Verzeichnis von Next.js automatisch statisch optimiert wurde und der Router noch nicht bereit ist.
  • Bei der Verwendung von usePathname mit Rewrites in next.config oder Middleware müssen auch useState und useEffect verwendet werden, um Hydratisierungs-Fehlermeldungen zu vermeiden.
  • 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ückgabewerte

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

Beispiele

Auf eine Routenänderung reagieren

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Hier können Sie etwas tun...
  }, [pathname, searchParams])
}

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Hier können Sie etwas tun...
  }, [pathname, searchParams])
}