Tác giả:
    Ngày tạo:2026-09-19Cập nhật lần cuối:2026-09-19

    Tài liệu Hook useLocale

    Hook useLocale từ remix-intlayer cung cấp quyền truy cập vào locale của yêu cầu HTTP hiện đang được xử lý, cùng với locale mặc định và các locale có sẵn được định cấu hình trong dự án.

    Cách sử dụng

    Trong một thành phần Remix (ví dụ bộ chuyển đổi ngôn ngữ):

    src/components/LocaleSwitcher.tsx
    import { type FC } from "react";
    import { Link } from "@remix-run/react";
    import { useLocale } from "remix-intlayer";
    import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";
    
    export const LocaleSwitcher: FC = () => {
      const { locale, availableLocales } = useLocale();
      const pathWithoutLocale = getPathWithoutLocale();
    
      return (
        <nav>
          <ul>
            {availableLocales.map((localeItem) => (
              <li key={localeItem} className="p-1">
                <Link
                  href={getLocalizedUrl(pathWithoutLocale, localeItem)}
                  aria-current={localeItem === locale ? "page" : undefined}
                >
                  {localeItem.toUpperCase()}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      );
    };
    

    Trong một route handler:

    src/server.ts
    import { createRouter } from "remix/router";
    import { intlayer, useLocale } from "remix-intlayer";
    
    const router = createRouter({
      middleware: [intlayer()],
    });
    
    router.get("/api/locale-info", () => {
      const { locale, defaultLocale, availableLocales } = useLocale();
    
      return Response.json({
        locale,
        defaultLocale,
        availableLocales,
      });
    });
    

    Giá trị trả về

    Hook trả về một đối tượng thuộc loại UseLocaleResult:

    Thuộc tínhLoạiMô tả
    localeDeclaredLocalesLocale đã được giải quyết cho yêu cầu hiện tại.
    defaultLocaleDeclaredLocalesLocale dự phòng mặc định được định cấu hình trong intlayer.config.ts.
    availableLocalesDeclaredLocales[]Mảng gồm tất cả các locale có sẵn được định cấu hình trong intlayer.config.ts.

    Mô tả

    1. Phân giải theo phạm vi yêu cầu: Trong một yêu cầu đang hoạt động được xử lý bởi middleware intlayer(), useLocale đọc locale đã được phân giải từ bộ lưu trữ yêu cầu.
    2. Dự phòng an toàn (Fallback): Nếu được gọi bên ngoài context yêu cầu (chẳng hạn như trong quá trình khởi tạo script hoặc bộ kiểm thử), nó sẽ mặc định chuyển về defaultLocale đã định cấu hình.

    Tài liệu liên quan