Integrasi React: Dokumentasi Hook usePathname

Hook usePathname dari react-intlayer mengembalikan nama path (pathname) browser saat ini dengan segmen locale yang dihapus. Hook ini bergantung pada properti window.location.pathname bawaan dan bereaksi terhadap peristiwa navigasi browser melalui popstate.

Mengimpor usePathname

import { usePathname } from "react-intlayer";

Ringkasan

Tidak seperti hook perutean khusus kerangka kerja (seperti yang ada di next-intlayer atau react-router), hook ini merupakan solusi ringan dan tidak bergantung pada kerangka kerja untuk aplikasi React murni. Hook ini mengekstrak URL saat ini dan menghapus awalan locale yang cocok (misalnya, /id/about menjadi /about).

Penggunaan

import type { FC } from "react";
import { usePathname } from "react-intlayer";

const Navigation: FC = () => {
  const pathname = usePathname();

  return (
    <nav>
      <a
        href="/home"
        style={{ fontWeight: pathname === "/home" ? "bold" : "normal" }}
      >
        Beranda
      </a>
      <a
        href="/about"
        style={{ fontWeight: pathname === "/about" ? "bold" : "normal" }}
      >
        Tentang
      </a>
    </nav>
  );
};

export default Navigation;

Nilai Kembali

Perilaku

• Penghapusan Locale: Di balik layar, ia menggunakan utilitas getPathWithoutLocale untuk secara otomatis mendeteksi dan menghapus locale dari pathname berdasarkan konfigurasi Intlayer aplikasi.
• Reaktivitas: Mendengarkan event popstate. Ketika pengguna bernavigasi menggunakan tombol maju/mundur browser atau ketika pushState/replaceState dipanggil, hook memperbarui pathname yang dikembalikan.
• SSR Fallback: Pada server (di mana window tidak terdefinisi), secara default mengembalikan / karena tidak memiliki akses ke URL permintaan secara default dalam konteks React murni.

Dokumentasi Terkait

• useLocale
• getPathWithoutLocale