Integracja React: Dokumentacja hooka usePathname

Hook usePathname z react-intlayer zwraca obecną ścieżkę (pathname) przeglądarki z usuniętym segmentem lokalizacji (locale). Opiera się na natywnej właściwości window.location.pathname i reaguje na zdarzenia nawigacji przeglądarki za pośrednictwem popstate.

Importowanie usePathname

import { usePathname } from "react-intlayer";

Przegląd

W przeciwieństwie do hooków routingu specyficznych dla frameworków (takich jak te w next-intlayer lub react-router), ten hook jest lekkim, niezależnym od frameworka rozwiązaniem dla czystych aplikacji React. Wyciąga bieżący adres URL i usuwa wszelkie pasujące prefiksy lokalizacji (np. /pl/about staje się /about).

Użycie

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" }}
      >
        Strona główna
      </a>
      <a
        href="/about"
        style={{ fontWeight: pathname === "/about" ? "bold" : "normal" }}
      >
        O nas
      </a>
    </nav>
  );
};

export default Navigation;

Zwracana wartość

Zachowanie

• Usuwanie lokalizacji: Pod maską korzysta z narzędzia getPathWithoutLocale, aby automatycznie wykrywać i usuwać lokalizację ze ścieżki w oparciu o konfigurację Intlayer aplikacji.
• Reaktywność: Nasłuchuje zdarzenia popstate. Gdy użytkownik nawiguje za pomocą przycisków wstecz/dalej w przeglądarce lub gdy wywoływane jest pushState/replaceState, hook aktualizuje zwracaną ścieżkę.
• SSR Fallback: Na serwerze (gdzie window jest niezdefiniowane), domyślnie zwraca /, ponieważ w czystym kontekście React domyślnie nie ma dostępu do adresu URL żądania.

Powiązana dokumentacja

• useLocale
• getPathWithoutLocale