Svelte Integration: usePathname Dokumentation

Die Funktion usePathname gibt den aktuellen Browser-Pfadnamen (pathname) ohne das Locale-Segment als einen Svelte Readable<string> Store zurück. Sie ist nützlich für den Aufbau einer Locale-bewussten Navigation — zum Beispiel, um festzustellen, welches Navigationselement aktiv ist —, ohne das Locale-Präfix manuell entfernen zu müssen.

Importieren von usePathname in Svelte

import { usePathname } from "svelte-intlayer";

Überblick

usePathname erstellt einen lesbaren Svelte-Store, der window.location.pathname liest, das Locale-Präfix über getPathWithoutLocale entfernt und einen neuen Wert ausgibt, wenn der Browser ein popstate-Ereignis auslöst (Zurück/Vorwärts-Navigation). Abonnieren Sie diesen Store mit der $ Store-Syntax in Komponenten.

Verwendung

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

  export let href: string;
  export let label: string;

  const pathname = usePathname();
</script>

<a {href} aria-current={$pathname === href ? "page" : undefined}>
  {label}
</a>

Rückgabewert

Verhalten

• Entfernen des Locales: Entfernt das führende Locale-Segment (z. B. /de/dashboard → /dashboard).
• Reaktiv: Gibt bei jedem popstate-Ereignis (Zurück / Vorwärts im Browser) einen neuen Wert aus.
• SSR-sicher: Gibt "" zurück, wenn window nicht verfügbar ist.
• Bereinigung (Cleanup): Der popstate-Listener wird automatisch entfernt, wenn der letzte Abonnent sich abmeldet.

Beispiel

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

  const links = [
    { href: "/dashboard", label: "Dashboard" },
    { href: "/settings", label: "Einstellungen" },
  ];

  const pathname = usePathname();
</script>

<nav>
  {#each links as link}
    <a
      href={link.href}
      style:font-weight={$pathname === link.href ? "bold" : "normal"}
    >
      {link.label}
    </a>
  {/each}
</nav>

Verwandt

• useLocale — aktuelle Locale + Locale-Umschalter
• getPathWithoutLocale — das grundlegende Dienstprogramm, das von diesem Hook verwendet wird