React統合: usePathname フックドキュメント

react-intlayerのusePathnameフックは、ロケールセグメントが削除された現在のブラウザパス名を返します。ネイティブのwindow.location.pathnameに依存し、popstateを介してブラウザのナビゲーションイベントに反応します。

usePathnameのインポート

import { usePathname } from "react-intlayer";

概要

フレームワーク固有のルーティングフック（next-intlayerやreact-routerなど）とは異なり、このフックはプレーンなReactアプリケーション向けの軽量でフレームワークに依存しないソリューションです。現在のURLを抽出し、一致するロケールプレフィックスを削除します（例：/ja/aboutは/aboutになります）。

使用方法

import type { FC } from "react";
import { usePathname } from "react-intlayer";

const Navigation: FC = () => {
  const pathname = usePathname();

  return (
    <nav>
      <a
        href="/home"
        style={{ fontWeight: pathname === "/home" ? "bold" : "normal" }}
      >
        ホーム
      </a>
      <a
        href="/about"
        style={{ fontWeight: pathname === "/about" ? "bold" : "normal" }}
      >
        概要
      </a>
    </nav>
  );
};

export default Navigation;

戻り値

動作

• ロケールの削除: 内部的にgetPathWithoutLocaleユーティリティを使用して、アプリケーションのIntlayer設定に基づいてパス名から自動的にロケールを検出および削除します。
• 反応性: popstateイベントをリッスンします。ユーザーがブラウザの戻る/進むボタンを使用してナビゲートするか、pushState/replaceStateが呼び出されると、フックは返されるパス名を更新します。
• SSRのフォールバック: サーバー上（windowが未定義の場合）、純粋なReactコンテキストではデフォルトでリクエストURLにアクセスできないため、デフォルトで/を返します。

関連ドキュメント

• useLocale
• getPathWithoutLocale