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