Svelte Entegrasyonu: usePathname Dokümantasyonu

usePathname fonksiyonu, locale segmenti kaldırılmış geçerli tarayıcı yol adını (pathname) bir Svelte Readable<string> store'u olarak döndürür. Locale önekini manuel olarak kaldırmanıza gerek kalmadan, locale farkındalığına sahip navigasyonlar oluşturmak (örneğin hangi navigasyon öğesinin aktif olduğunu belirlemek) için yararlıdır.

Svelte'de usePathname Kullanımı

import { usePathname } from "svelte-intlayer";

Genel Bakış

usePathname, window.location.pathname üzerinden okuma yapan ve locale önekini getPathWithoutLocale aracılığıyla kaldıran bir Svelte okuma (readable) store'u oluşturur ve tarayıcı her popstate olayı tetiklediğinde (geri/ileri gezinme) yeni bir değer yayar. Bileşenlerde $ store sözdizimi ile abone olunur.

Kullanım

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

Döndürülen Değer

Davranış

• Locale kaldırma: Başta bulunan locale segmentini kaldırır (ör. /tr/dashboard → /dashboard).
• Reaktif: Her popstate olayında (tarayıcıda geri / ileri navigasyonu) yeni bir değer yayar.
• SSR-güvenli: window mevcut olmadığında "" döndürür.
• Temizleme (Cleanup): Son abone abonelikten çıktığında popstate dinleyicisi otomatik olarak kaldırılır.

Örnek

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

  const links = [
    { href: "/dashboard", label: "Gösterge Paneli" },
    { href: "/settings", label: "Ayarlar" },
  ];

  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>

İlgili

• useLocale — mevcut locale + locale değiştirici
• getPathWithoutLocale — bu hook tarafından kullanılan temel yardımcı program