Integrasi Svelte: Dokumentasi usePathname

Fungsi usePathname mengembalikan pathname browser saat ini dengan segmen locale yang telah dihapus, dalam bentuk store Svelte Readable<string>. Ini berguna untuk membangun navigasi yang sadar akan locale — misalnya, menentukan item navigasi mana yang sedang aktif — tanpa harus menghapus awalan locale secara manual.

Mengimpor usePathname di Svelte

import { usePathname } from "svelte-intlayer";

Gambaran Umum

usePathname membuat store Svelte yang dapat dibaca (readable) yang membaca window.location.pathname, menghapus awalan locale melalui getPathWithoutLocale, dan memancarkan nilai baru setiap kali browser memicu peristiwa popstate (navigasi mundur/maju). Berlanggananlah (subscribe) menggunakan sintaks store $ di dalam komponen.

Penggunaan

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

Nilai Kembalian

Perilaku

• Penghapusan Locale: Menghapus segmen locale di awal (misal: /id/dashboard → /dashboard).
• Reaktif: Memancarkan nilai baru setiap terjadi peristiwa popstate (navigasi mundur / maju pada browser).
• Aman untuk SSR: Mengembalikan "" saat window tidak tersedia.
• Pembersihan (Cleanup): Pendengar (listener) popstate dihapus secara otomatis ketika pelanggan (subscriber) terakhir berhenti berlangganan (unsubscribe).

Contoh

<script lang="ts">  import { usePathname } from "svelte-intlayer";  const links = [    { href: "/dashboard", label: "Dasbor" },    { href: "/settings", label: "Pengaturan" },  ];  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>

Terkait

• useLocale — locale saat ini + pengalih locale
• getPathWithoutLocale — utilitas dasar yang digunakan oleh hook ini