Intégration Preact : Documentation du Hook usePathname

Le hook usePathname retourne le chemin actuel du navigateur en supprimant le segment de la locale. Il est utile pour créer une navigation adaptée à la locale — par exemple, pour déterminer quel élément de navigation est actif — sans avoir à supprimer manuellement le préfixe de la locale.

Importer usePathname dans Preact

import { usePathname } from "preact-intlayer";

Aperçu

usePathname lit window.location.pathname, retire le préfixe de la locale via getPathWithoutLocale, et déclenche un nouveau rendu du composant chaque fois que le navigateur émet un événement popstate (navigation via les boutons Précédent/Suivant). Il retourne une chaîne vide pendant le rendu côté serveur (SSR).

Utilisation

import type { FunctionComponent } from "preact";
import { usePathname } from "preact-intlayer";

type NavItemProps = {
  href: string;
  label: string;
};

const NavItem: FunctionComponent<NavItemProps> = ({ href, label }) => {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <a href={href} aria-current={isActive ? "page" : undefined}>
      {label}
    </a>
  );
};

export default NavItem;

Valeur de Retour

Comportement

• Suppression de la locale : Retire le segment de locale au début de l'URL (ex. /fr/dashboard → /dashboard).
• Réactif : Se met à jour automatiquement lors des événements popstate (navigation Précédent / Suivant du navigateur).
• Compatible SSR : Retourne "" lorsque window n'est pas disponible.
• Nettoyage : L'écouteur popstate est supprimé automatiquement lors du démontage du composant.

Exemple

import type { FunctionComponent } from "preact";
import { usePathname } from "preact-intlayer";

const links = [
  { href: "/dashboard", label: "Tableau de bord" },
  { href: "/settings", label: "Paramètres" },
];

const Sidebar: FunctionComponent = () => {
  const pathname = usePathname();

  return (
    <nav>
      {links.map(({ href, label }) => (
        <a
          key={href}
          href={href}
          style={{ fontWeight: pathname === href ? "bold" : "normal" }}
        >
          {label}
        </a>
      ))}
    </nav>
  );
};

export default Sidebar;

Ressources associées

• useLocale — locale actuelle + sélecteur de locale
• getPathWithoutLocale — l'utilitaire sous-jacent employé par ce hook