Integrazione Solid: Documentazione dell'Hook usePathname

L'hook usePathname restituisce il percorso del browser attuale (pathname) con il segmento locale rimosso, sotto forma di Accessor<string> in Solid. È utile per la navigazione basata sul locale — per esempio, determinare quale voce di menu è attiva — senza dover rimuovere manualmente il prefisso locale.

Importare usePathname in Solid

import { usePathname } from "solid-intlayer";

Panoramica

usePathname crea un segnale reattivo inizializzato da window.location.pathname, rimuove il prefisso locale tramite getPathWithoutLocale e aggiorna il segnale ogni volta che il browser scatena un evento popstate (navigazione indietro/avanti). Il listener degli eventi viene pulito automaticamente tramite onCleanup.

Utilizzo

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;

Valore Restituito

Comportamento

• Rimozione Locale: Rimuove il segmento del locale iniziale (es. /it/dashboard → /dashboard).
• Reattivo: Si aggiorna automaticamente agli eventi popstate (navigazione indietro/avanti nel browser).
• Sicuro in SSR: Restituisce "" quando window non è disponibile.
• Pulizia: Il listener popstate viene rimosso automaticamente tramite onCleanup di Solid.

Esempio

import type { Component } from "solid-js";import { For } from "solid-js";import { usePathname } from "solid-intlayer";const links = [  { href: "/dashboard", label: "Dashboard" },  { href: "/settings", label: "Impostazioni" },];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;

Correlati

• useLocale — locale corrente + commutatore di locale
• getPathWithoutLocale — l'utilità sottostante utilizzata da questo hook