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