Integrazione Svelte: Documentazione di usePathname

La funzione usePathname restituisce il pathname corrente del browser con il segmento della locale rimosso, sotto forma di store Svelte Readable<string>. È utile per costruire una navigazione consapevole della locale — per esempio, determinare quale elemento di navigazione è attivo — senza dover rimuovere manualmente il prefisso della locale.

Importare usePathname in Svelte

import { usePathname } from "svelte-intlayer";

Panoramica

usePathname crea uno store Svelte leggibile inizializzato da window.location.pathname, rimuove il prefisso della locale tramite getPathWithoutLocale, ed emette un nuovo valore ogni volta che il browser genera un evento popstate (navigazione avanti/indietro). Sottoscriviti con la sintassi di store $ nei componenti.

Utilizzo

<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>

Valore Restituito

Comportamento

• Rimozione della locale: Rimuove il segmento iniziale della locale (es. /it/dashboard → /dashboard).
• Reattività: Emette un nuovo valore a ogni evento popstate (navigazione avanti / indietro del browser).
• Sicurezza SSR: Restituisce "" quando window non è disponibile.
• Pulizia (Cleanup): Il listener popstate viene rimosso automaticamente quando l'ultimo sottoscrittore si annulla.

Esempio

<script lang="ts">  import { usePathname } from "svelte-intlayer";  const links = [    { href: "/dashboard", label: "Dashboard" },    { href: "/settings", label: "Impostazioni" },  ];  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>

Correlati

• useLocale — locale corrente + selettore della locale
• getPathWithoutLocale — l'utilità di base utilizzata da questo hook