Intégration avec Solid : Documentation du Hook usePathname

Le hook usePathname retourne le chemin du navigateur (pathname) actuel avec le segment de locale supprimé, sous la forme d'un Accessor<string> de Solid. Il est utile pour la navigation liée à la langue — par exemple, déterminer quel élément de navigation est actif — sans avoir à supprimer manuellement le préfixe de la locale.

Importer usePathname avec Solid

import { usePathname } from "solid-intlayer";

Aperçu

usePathname crée un signal réactif initialisé à partir de window.location.pathname, retire le préfixe de la locale via getPathWithoutLocale et met à jour le signal chaque fois que le navigateur déclenche un événement popstate (navigation retour/avant). L'écouteur d'événements est nettoyé automatiquement via onCleanup.

Utilisation

import type { Component } from "solid-js";import { usePathname } from "solid-intlayer";type NavItemProps = {  href: string;  label: string;};const NavItem: Component<NavItemProps> = ({ href, label }) => {  const pathname = usePathname();  return (    <a href={href} aria-current={pathname() === href ? "page" : undefined}>      {label}    </a>  );};export default NavItem;

Valeur de retour

Comportement

• Suppression de la locale : Retire le segment de locale du début du chemin (par ex. /fr/dashboard → /dashboard).
• Réactif : Se met à jour automatiquement lors d'événements popstate (navigation retour / avant du navigateur).
• Sûr pour SSR : Retourne "" quand window n'est pas disponible.
• Nettoyage : L'écouteur popstate est retiré automatiquement via la fonction onCleanup de Solid.

Exemple

import type { Component } from "solid-js";import { For } from "solid-js";import { usePathname } from "solid-intlayer";const links = [  { href: "/dashboard", label: "Tableau de bord" },  { href: "/settings", label: "Paramètres" },];const Sidebar: Component = () => {  const pathname = usePathname();  return (    <nav>      <For each={links}>        {({ href, label }) => (          <a            href={href}            style={{ "font-weight": pathname() === href ? "bold" : "normal" }}          >            {label}          </a>        )}      </For>    </nav>  );};export default Sidebar;

Voir Aussi

• useLocale — locale actuelle + commutateur de locale
• getPathWithoutLocale — utilitaire sous-jacent utilisé par ce hook