Інтеграція зі 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 — базова утиліта, що використовується цим хуком