作者:
    Aymeric PINEAU
    Creation:2026-09-19Last update:2026-09-19

    useIntlayer 钩子文档

    useIntlayer 钩子允许在 Remix 3 应用程序中按键从 Intlayer 字典检索本地化内容。

    它会自动从当前请求上下文（通过 AsyncLocalStorage）读取活动语言环境，因此无需通过路由处理程序、视图模板或组件传递语言环境。

    使用方法

    在路由处理程序中

    src/server.ts
    import { createRouter } from "remix/router";
import { intlayer, useIntlayer } from "remix-intlayer";

const router = createRouter({
  middleware: [intlayer()],
});

router.get("/api/welcome", () => {
  const content = useIntlayer("home");

  return Response.json({
    title: content.title,
    subtitle: content.subtitle,
  });
});

    在视图模板和组件中

    src/views/home.ts
    import { useIntlayer } from "remix-intlayer";

export const HomeView = () => {
  const content = useIntlayer("home");

  return `
    <main>
      <h1>${content.title}</h1>
      <p>${content.subtitle}</p>
    </main>
  `;
};

    参数

    ts
    useIntlayer(key, localeOrSelector?)
    1. key: 字典的唯一键（在 .content.ts 声明文件中定义）。
    2. localeOrSelector（可选）: 特定语言环境或选择器对象（{ item }、{ variant }，可包含 locale）。提供时，它会覆盖从请求上下文中检测到的语言环境。

    说明

    该钩子执行以下任务：

    1. 上下文语言环境检测: 从 intlayer() 中间件建立的与请求绑定的 AsyncLocalStorage 作用域中检测当前语言环境。
    2. 字典获取: 检索与提供的键对应的预编译字典。
    3. 翻译处理: 针对解析出的语言环境处理翻译、枚举、Markdown 和条件内容。
    4. 回退处理 (Fallback): 如果在活动 HTTP 请求上下文之外调用（例如后台任务或没有中间件的单元测试），它会安全回退到配置的 defaultLocale。

    相关文档

    useDictionaryuseLocale