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