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