Svelte 統合: usePathname ドキュメント

usePathname 関数は、ロケールセグメントが削除された現在のブラウザのパス名を Svelte の Readable<string> ストアとして返します。これは、ロケールプレフィックスを手動で削除することなく、ロケールを考慮したナビゲーション（例えば、どのナビゲーション項目がアクティブかを判断するなど）を構築するのに役立ちます。

Svelte で usePathname をインポートする

import { usePathname } from "svelte-intlayer";

概要

usePathname は window.location.pathname から初期化される Svelte の読み取り可能なストア（readable store）を作成し、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>

戻り値

動作

• ロケールの削除: 先頭のロケールセグメントを削除します（例: /ja/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 — このフックで使用される基礎的なユーティリティ