Integracja ze Svelte: Dokumentacja usePathname

Funkcja usePathname zwraca bieżącą ścieżkę przeglądarki (pathname) z usuniętym segmentem locale jako Readable<string> ze Svelte. Jest to przydatne do budowania nawigacji uwzględniającej locale — na przykład określania, który element nawigacji jest aktywny — bez konieczności ręcznego usuwania prefiksu locale.

Importowanie usePathname w Svelte

import { usePathname } from "svelte-intlayer";

Przegląd

usePathname tworzy store w Svelte w trybie tylko do odczytu (readable store), który odczytuje window.location.pathname, usuwa prefiks locale za pomocą getPathWithoutLocale i emituje nową wartość za każdym razem, gdy przeglądarka wywoła zdarzenie popstate (nawigacja wstecz/dalej). Subskrybuj przy użyciu składni $ w komponentach.

Użycie

<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>

Zwracana wartość

Zachowanie

• Usuwanie locale: Usuwa początkowy segment locale (np. /pl/dashboard → /dashboard).
• Reaktywność: Emituje nową wartość po każdym zdarzeniu popstate (nawigacja w przeglądarce w tył/w przód).
• Bezpieczeństwo w SSR: Zwraca "", gdy obiekt window nie jest dostępny.
• Czyszczenie (Cleanup): Nasłuchiwacz popstate jest automatycznie usuwany po odsubskrybowaniu ostatniego subskrybenta.

Przykład

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

  const links = [
    { href: "/dashboard", label: "Panel sterowania" },
    { href: "/settings", label: "Ustawienia" },
  ];

  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>

Zobacz również

• useLocale — bieżące locale + przełącznik locale
• getPathWithoutLocale — bazowe narzędzie używane przez ten hook