Integração com Svelte: Documentação da usePathname

A função usePathname retorna o pathname atual do navegador com o segmento da locale removido, como um store Svelte Readable<string>. É útil para construir navegação com reconhecimento de locale — por exemplo, determinar qual item de navegação está ativo — sem ter que remover o prefixo da locale manualmente.

Importando usePathname no Svelte

import { usePathname } from "svelte-intlayer";

Visão Geral

usePathname cria um store legível Svelte que lê window.location.pathname, remove o prefixo da locale através de getPathWithoutLocale, e emite um novo valor sempre que o navegador dispara um evento popstate (navegação voltar/avançar). Subscreva com a sintaxe de store $ em 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

Comportamento

• Remoção da locale: Remove o segmento inicial da locale (ex: /pt/dashboard → /dashboard).
• Reativo: Emite um novo valor a cada evento popstate (navegação de voltar/avançar do navegador).
• Seguro para SSR: Retorna "" quando window não está disponível.
• Limpeza: O listener de popstate é removido automaticamente quando o último subscritor se desinscreve.

Exemplo

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

  const links = [
    { href: "/dashboard", label: "Dashboard" },
    { href: "/settings", label: "Configurações" },
  ];

  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 atual + seletor de locale
• getPathWithoutLocale — o utilitário subjacente usado por este hook