Intégration Svelte : Documentation de usePathname

La fonction usePathname retourne le pathname actuel du navigateur sans le segment de la locale, sous forme de store Svelte Readable<string>. Cela est utile pour construire une navigation sensible à la locale — par exemple, déterminer quel élément de navigation est actif — sans avoir à supprimer manuellement le préfixe de la locale.

Importer usePathname dans Svelte

import { usePathname } from "svelte-intlayer";

Aperçu

usePathname crée un store Svelte lisible qui lit window.location.pathname, retire le préfixe de la locale via getPathWithoutLocale, et émet une nouvelle valeur chaque fois que le navigateur déclenche un événement popstate (navigation retour/avance). Souscrivez avec la syntaxe de store $ dans les composants.

Utilisation

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

  export let href: string;
  export let label: string;

  const pathname = usePathname();
</script>

<a {href} aria-current={$pathname === href ? "page" : undefined}>
  {label}
</a>

Valeur de retour

Comportement

• Suppression de la locale : Retire le segment de locale de début (ex. /fr/dashboard → /dashboard).
• Réactivité : Émet une nouvelle valeur à chaque événement popstate (navigation arrière / avant du navigateur).
• Sûr pour le SSR : Retourne "" lorsque window n'est pas disponible.
• Nettoyage : L'écouteur popstate est retiré automatiquement lorsque le dernier abonné se désabonne.

Exemple

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

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

  const pathname = usePathname();
</script>

<nav>
  {#each links as link}
    <a
      href={link.href}
      style:font-weight={$pathname === link.href ? "bold" : "normal"}
    >
      {link.label}
    </a>
  {/each}
</nav>

Voir aussi

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