usePathname

usePathname ist ein Client Component-Hook, der es ermöglicht, den aktuellen Pfadnamen (pathname) der 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 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 eine Zeichenkette mit dem aktuellen Pfadnamen der 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])
}