Solid Integration: usePathname Hook Dokumentation

Der usePathname Hook gibt den aktuellen Browser-Pfadnamen (pathname) ohne das Locale-Segment als Solid Accessor<string> zurück. Dies ist nützlich für locale-sensitive Navigation — zum Beispiel um zu bestimmen, welches Navigationselement aktiv ist — ohne den Locale-Präfix manuell entfernen zu müssen.

Importieren von usePathname in Solid

import { usePathname } from "solid-intlayer";

Überblick

usePathname erstellt ein reaktives Signal, das von window.location.pathname initialisiert wird, entfernt das Locale-Präfix über getPathWithoutLocale und aktualisiert das Signal, wann immer der Browser ein popstate-Ereignis auslöst (Zurück-/Vorwärtsnavigation). Der Ereignis-Listener wird automatisch über onCleanup bereinigt.

Nutzung

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;

Rückgabewert

Verhalten

• Locale-Entfernung: Entfernt das führende Locale-Segment (z.B. /de/dashboard → /dashboard).
• Reaktiv: Aktualisiert sich automatisch bei popstate-Ereignissen (Zurück / Vorwärts-Navigation im Browser).
• SSR-sicher: Gibt "" zurück, wenn window nicht verfügbar ist.
• Bereinigung: Der popstate-Listener wird automatisch über Solids onCleanup entfernt.

Beispiel

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: "Einstellungen" },];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;

Verwandte Dokumente

• useLocale — aktuelle Locale + Locale-Umschalter
• getPathWithoutLocale — das zugrunde liegende Dienstprogramm, das von diesem Hook verwendet wird