Tích hợp Next.js: Tài liệu Hook usePathname

Hook usePathname trả về đường dẫn (pathname) Next.js hiện tại đã loại bỏ phân đoạn vùng miền (locale segment). Điều này rất hữu ích để xây dựng tính năng điều hướng nhận thức vùng miền (locale-aware) — ví dụ: để xác định xem mục điều hướng nào đang hoạt động — mà không cần phải loại bỏ tiền tố locale theo cách thủ công.

Nhập usePathname trong Next.js

import { usePathname } from "next-intlayer";

Tổng quan

usePathname bọc hàm usePathname() tích hợp của Next.js từ next/navigation, bổ sung thêm bất kỳ tham số tìm kiếm (search params) nào và loại bỏ tiền tố vùng miền thông qua getPathWithoutLocale. Nó kích hoạt một quá trình render lại mỗi khi có điều hướng ở phía máy khách. Hook này chỉ có sẵn bên trong Client Components (yêu cầu "use client").

Cách sử dụng

"use client";

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

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

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

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

export default NavItem;

Giá trị trả về

Hành vi

• Xóa Locale: Xóa phân đoạn locale ban đầu (ví dụ: /vi/dashboard → /dashboard).
• Xóa Search Param: Đồng thời loại bỏ tham số truy vấn ?locale=... khi sử dụng chế độ định tuyến dựa trên tham số tìm kiếm.
• Tính phản ứng (Reactive): Cập nhật tự động trên mọi lần điều hướng phía máy khách thông qua Next.js App Router.
• An toàn với SSR: Trả về đường dẫn từ máy chủ trong lần render đầu tiên, sau đó đồng bộ hóa tham số tìm kiếm trên máy khách.

So sánh với useLocale

Hàm useLocale của next-intlayer đã tiết lộ pathWithoutLocale dưới dạng một phần của giá trị trả về của nó. Bạn có thể sử dụng usePathname khi bạn chỉ cần lấy đường dẫn và không cần chức năng chuyển đổi locale.

// Khi bạn cần cả trạng thái locale và đường dẫn:
import { useLocale } from "next-intlayer";
const { locale, pathWithoutLocale } = useLocale();

// Khi bạn chỉ cần lấy đường dẫn:
import { usePathname } from "next-intlayer";
const pathname = usePathname();

Ví dụ

"use client";

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

const links = [
  { href: "/dashboard", label: "Bảng điều khiển" },
  { href: "/settings", label: "Cài đặt" },
];

const Sidebar: FC = () => {
  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;

Liên kết liên quan

• useLocale — locale hiện tại + bộ chuyển đổi locale (cũng phơi bày pathWithoutLocale)
• getPathWithoutLocale — tiện ích cơ bản được sử dụng bởi hook này