Integración con Svelte: Documentación de usePathname

La función usePathname devuelve el pathname actual del navegador sin el segmento de la locale, como un store Readable<string> de Svelte. Es útil para construir navegación con reconocimiento de la locale — por ejemplo, para determinar qué elemento de navegación está activo — sin tener que eliminar manualmente el prefijo de la locale.

Importar usePathname en Svelte

import { usePathname } from "svelte-intlayer";

Descripción general

usePathname crea un store legible de Svelte que lee window.location.pathname, elimina el prefijo de la locale a través de getPathWithoutLocale, y emite un nuevo valor cada vez que el navegador dispara un evento popstate (navegación atrás/adelante). Suscríbete con la sintaxis de store $ en los componentes.

Uso

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

Valor de retorno

Comportamiento

• Eliminación de la locale: Elimina el segmento inicial de la locale (ej. /es/dashboard → /dashboard).
• Reactividad: Emite un nuevo valor en cada evento popstate (navegación atrás / adelante del navegador).
• Seguro para SSR: Devuelve "" cuando window no está disponible.
• Limpieza: El escuchador popstate se elimina automáticamente cuando se da de baja el último suscriptor.

Ejemplo

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

Relacionado

• useLocale — locale actual + selector de locale
• getPathWithoutLocale — la utilidad subyacente utilizada por este hook