Integrazione React: Documentazione dell'Hook usePathname

L'hook usePathname da react-intlayer restituisce il percorso corrente (pathname) del browser con il segmento della locale rimosso. Si basa sulla proprietà nativa window.location.pathname e reagisce agli eventi di navigazione del browser tramite popstate.

Importare usePathname

import { usePathname } from "react-intlayer";

Panoramica

A differenza degli hook di routing specifici del framework (come quelli in next-intlayer o react-router), questo hook è una soluzione leggera, indipendente dal framework, per semplici applicazioni React. Estrae l'URL corrente e rimuove qualsiasi prefisso di locale corrispondente (ad esempio, /it/about diventa /about).

Uso

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" }}
      >
        Home
      </a>
      <a
        href="/about"
        style={{ fontWeight: pathname === "/about" ? "bold" : "normal" }}
      >
        Chi siamo
      </a>
    </nav>
  );
};

export default Navigation;

Valore di Ritorno

Comportamento

• Rimozione della Locale: Utilizza l'utilità getPathWithoutLocale dietro le quinte per rilevare e rimuovere automaticamente la locale dal pathname in base alla configurazione Intlayer dell'applicazione.
• Reattività: Ascolta l'evento popstate. Quando l'utente naviga utilizzando i pulsanti avanti/indietro del browser o quando viene chiamato pushState/replaceState, l'hook aggiorna il percorso restituito.
• Fallback SSR: Sul server (dove window è indefinito), per impostazione predefinita restituisce / poiché non ha accesso all'URL della richiesta di default in un contesto React puro.

Documentazione Correlata

• useLocale
• getPathWithoutLocale