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

Hook usePathname trả về pathname của trình duyệt hiện tại với phần locale đã bị loại bỏ, dưới dạng một Accessor<string> của Solid. Nó hữu ích cho việc xây dựng điều hướng nhận biết locale — ví dụ, xác định 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.

Import usePathname trong Solid

import { usePathname } from "solid-intlayer";

Tổng quan

usePathname tạo ra một reactive signal được khởi tạo từ window.location.pathname, loại bỏ tiền tố locale thông qua getPathWithoutLocale, và cập nhật signal mỗi khi trình duyệt kích hoạt sự kiện popstate (điều hướng quay lại/tiến lên). Event listener sẽ tự động được dọn dẹp thông qua onCleanup.

Sử dụng

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;

Giá trị trả về

Hành vi

• Loại bỏ locale: Xóa bỏ phần locale ở đầu pathname (ví dụ: /vi/dashboard → /dashboard).
• Reactive (Phản ứng): Tự động cập nhật dựa trên các sự kiện popstate (điều hướng quay lại / tiến lên của trình duyệt).
• An toàn cho SSR: Trả về "" khi window không có sẵn.
• Dọn dẹp: popstate listener được loại bỏ tự động thông qua hàm onCleanup của Solid.

Ví dụ

import type { Component } from "solid-js";import { For } from "solid-js";import { usePathname } from "solid-intlayer";const links = [  { href: "/dashboard", label: "Bảng điều khiển" },  { href: "/settings", label: "Cài đặt" },];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;

Các tài liệu liên quan

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