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