Tích hợp React: Tài liệu Hook usePathname

Hook usePathname từ react-intlayer trả về đường dẫn hiện tại của trình duyệt (pathname) với phân đoạn ngôn ngữ (locale) đã được loại bỏ. Nó dựa trên thuộc tính window.location.pathname gốc và phản hồi các sự kiện điều hướng của trình duyệt qua popstate.

Nhập usePathname

import { usePathname } from "react-intlayer";

Tổng quan

Không giống như các hook định tuyến dành riêng cho framework (như trong next-intlayer hoặc react-router), hook này là một giải pháp gọn nhẹ, độc lập với framework dành cho các ứng dụng React thuần túy. Nó trích xuất URL hiện tại và loại bỏ bất kỳ tiền tố locale nào phù hợp (ví dụ: /vi/about trở thành /about).

Sử dụng

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" }}
      >
        Trang chủ
      </a>
      <a
        href="/about"
        style={{ fontWeight: pathname === "/about" ? "bold" : "normal" }}
      >
        Giới thiệu
      </a>
    </nav>
  );
};

export default Navigation;

Giá trị Trả về

Hành vi

• Loại bỏ Locale: Bên dưới, nó sử dụng tiện ích getPathWithoutLocale để tự động phát hiện và loại bỏ locale khỏi pathname dựa trên cấu hình Intlayer của ứng dụng.
• Khả năng Phản hồi (Reactivity): Lắng nghe sự kiện popstate. Khi người dùng điều hướng bằng các nút tiến/lùi của trình duyệt hoặc khi gọi pushState/replaceState, hook sẽ cập nhật pathname được trả về.
• SSR Fallback: Trên server (nơi window là undefined), mặc định nó trả về / vì trong ngữ cảnh React thuần túy, mặc định nó không thể truy cập vào request URL.

Tài liệu Liên quan

• useLocale
• getPathWithoutLocale