Integrasi Preact: Dokumentasi Hook usePathname

Hook usePathname mengembalikan pathname browser saat ini dengan segmen locale yang telah dihilangkan. Hal ini berguna untuk membangun navigasi yang peka terhadap locale (misalnya, menentukan item navigasi mana yang aktif) tanpa harus menghilangkan awalan locale secara manual.

Mengimpor usePathname di Preact

import { usePathname } from "preact-intlayer";

Gambaran Umum

usePathname membaca window.location.pathname, menghilangkan awalan locale melalui getPathWithoutLocale, dan merender ulang komponen setiap kali browser memicu event popstate (navigasi kembali/maju). Hook ini mengembalikan string kosong selama proses Server-Side Rendering (SSR).

Penggunaan

import type { FunctionComponent } from "preact";
import { usePathname } from "preact-intlayer";

type NavItemProps = {
  href: string;
  label: string;
};

const NavItem: FunctionComponent<NavItemProps> = ({ href, label }) => {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <a href={href} aria-current={isActive ? "page" : undefined}>
      {label}
    </a>
  );
};

export default NavItem;

Nilai Kembalian

Perilaku

• Penghilangan Locale (Locale stripping): Menghilangkan segmen locale di awal URL (misalnya /id/dashboard → /dashboard).
• Reaktif: Memperbarui secara otomatis saat event popstate (navigasi kembali / maju pada browser).
• Aman untuk SSR (SSR-safe): Mengembalikan "" ketika window tidak tersedia.
• Pembersihan (Cleanup): Listener popstate dihapus secara otomatis saat komponen di-unmount.

Contoh

import type { FunctionComponent } from "preact";
import { usePathname } from "preact-intlayer";

const links = [
  { href: "/dashboard", label: "Dasbor" },
  { href: "/settings", label: "Pengaturan" },
];

const Sidebar: FunctionComponent = () => {
  const pathname = usePathname();

  return (
    <nav>
      {links.map(({ href, label }) => (
        <a
          key={href}
          href={href}
          style={{ fontWeight: pathname === href ? "bold" : "normal" }}
        >
          {label}
        </a>
      ))}
    </nav>
  );
};

export default Sidebar;

Terkait