Интеграция с 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>

Возвращаемое значение

Поведение

• Удаление локали: Удаляет ведущий сегмент локали (например, /ru/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 — базовая утилита, используемая этим хуком