Інтеграція зі Svelte: Документація usePathname

Функція usePathname повертає поточний шлях (pathname) браузера із видаленим сегментом локалі у вигляді Svelte-стору Readable<string>. Це корисно для створення навігації, що враховує локаль — наприклад, для визначення активного пункту меню — без необхідності вручну видаляти префікс локалі.

Імпорт usePathname у Svelte

import { usePathname } from "svelte-intlayer";

Огляд

usePathname створює Svelte readable store, який зчитує window.location.pathname, видаляє префікс локалі за допомогою getPathWithoutLocale, та видає нове значення кожного разу, коли браузер ініціює подію popstate (навігація назад/вперед). Підписуйтесь на стор за допомогою синтаксису $ у компонентах.

Використання

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

Значення, що повертається

Поведінка

• Видалення локалі: Видаляє початковий сегмент локалі (наприклад, /uk/dashboard → /dashboard).
• Реактивність: Автоматично видає нове значення при подіях popstate (навігація назад/вперед у браузері).
• Безпека для SSR: Повертає "", якщо об'єкт window недоступний.
• Очищення: Слухач popstate автоматично видаляється, коли відписується останній підписник.

Приклад

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

  const links = [
    { href: "/dashboard", label: "Дашборд" },
    { href: "/settings", label: "Налаштування" },
  ];

  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>

Пов'язані функції

• useLocale — поточна локаль + перемикач локалей
• getPathWithoutLocale — базова утиліта, що використовується цим хуком