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

Связанные функции