Інтеграція з React: Документація хука usePathname

Хук usePathname з react-intlayer повертає поточний шлях браузера (pathname) із видаленим сегментом локалі. Він покладається на нативну властивість window.location.pathname і реагує на події навігації браузера через popstate.

Імпорт usePathname

import { usePathname } from "react-intlayer";

Огляд

На відміну від хуків маршрутизації, специфічних для фреймворку (наприклад, у next-intlayer або react-router), цей хук є легким, незалежним від фреймворку рішенням для звичайних React-додатків. Він отримує поточну URL-адресу та видаляє будь-який співпадаючий префікс локалі (наприклад, /uk/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 Fallback: На сервері (де window не визначено), за замовчуванням повертає /, оскільки він не має доступу до URL-адреси запиту в чистому контексті React.

Пов'язана документація

• useLocale
• getPathWithoutLocale