React

載入翻譯內容

本頁說明 Intor 在 React 專案中的翻譯內容載入方式。

Bundled

在 React 快速開始中，已示範透過 定義在設定檔中 的方式載入翻譯內容。
本節將說明另一種載入方式：依語系載入 (Dynamic Import) 。


依語系載入 (Dynamic Import)

沿用 React 快速開始 的翻譯內容結構。

為了示意不同的載入方式，故暫時移除設定檔中 messages 定義。

intor-config.ts
M
import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  // messages: { en: EN, fr: FR },
});

接著，在 i18n/ 資料夾中建立 load-messages.ts。

load-messages.ts
U

完整實作請參考：依語系載入 (Dynamic Import)


最後，於 intor-client-provider.tsx 中使用 useIntor 並傳入對應的載入函式。

intor-client-provider.tsx
M
import type { ReactNode } from "react";
import { IntorProvider, useIntor } from "intor/react";
import { intorConfig } from "./intor-config";
import { loadMessages } from "./load-messages";

export function IntorClientProvider({ children }: { children: ReactNode }) {
  const value = useIntor(intorConfig, loadMessages);

  return <IntorProvider value={value}>{children}</IntorProvider>;
}

useIntor 用於封裝翻譯內容載入與狀態管理流程。

On this page