0Pricing
React Academy · 课时

语言切换器与翻译延迟加载

构建区域设置切换器，并按需加载翻译包，以减小初始体积。

语言切换器与翻译延迟加载 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将构建语言切换器组件，并配置 i18next 按需加载翻译包，从而减少初始 JavaScript 负载。

简单的语言切换器

在按钮点击时调用 i18n.changeLanguage() 来切换当前语言。所有使用 useTranslation 的组件都会自动以新语言重新渲染。
function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <div>
      {['en', 'tr', 'fr'].map(lng => (
        <button
          key={lng}
          onClick={() => i18n.changeLanguage(lng)}
          style={{ fontWeight: i18n.language === lng ? 'bold' : 'normal' }}
        >
          {lng.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

持久化语言选择

将所选语言持久化到 localStorage，使其在页面重新加载后仍然保留。LanguageDetector 插件通过 `localStorage` 检测器顺序自动处理此事。
i18n.init({
  detection: {
    order: ['localStorage', 'navigator'],
    caches: ['localStorage'],
  },
});

为什么要延迟加载翻译？

将所有翻译包含在 JavaScript 包中会增加初始加载时间。延迟加载会在首次加载时只发送默认语言，只有用户切换语言时才获取其他语言。

配置 HTTP 后端

i18next-http-backend 插件会根据 URL 模式获取翻译文件。翻译文件位于 `public/` 文件夹中，并作为静态资源提供——无需服务端代码。
import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
  ns: ['common', 'auth'],
  defaultNS: 'common',
});

添加翻译文件

在 `public/locales/` 中为每种语言和每个命名空间创建一个 JSON 文件。首次需要某种语言或命名空间时，HTTP 后端会自动获取相应文件。
public/locales/
  en/common.json
  en/auth.json
  tr/common.json
  tr/auth.json

切换语言时显示加载状态

调用 changeLanguage() 后，i18next 会异步加载新语言的文件。订阅 `i18n.on('languageChanged')` 事件，或检查 `i18n.isInitialized`，即可显示加载指示器。
const [switching, setSwitching] = useState(false);

const change = async (lng) => {
  setSwitching(true);
  await i18n.changeLanguage(lng);
  setSwitching(false);
};

延迟加载特定命名空间

使用 `i18n.loadNamespaces(['dashboard'])`，仅在首次需要时加载命名空间。在仪表板路由挂载时于 useEffect 中调用它，避免为未通过身份验证的用户加载该命名空间。
useEffect(() => {
  i18n.loadNamespaces('dashboard');
}, []);

用于翻译的 CDN

在生产环境中，将翻译文件托管在 CDN 上（S3 + CloudFront）。将 `loadPath` 更新为 CDN URL。这样可以将翻译更新与代码部署分离。
backend: {
  loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
}

URL 中的区域设置

许多应用会将区域设置嵌入 URL 中（例如 /en/products、/tr/products）。将 React Router 与 i18n 结合使用：从 URL 参数中读取区域设置，调用 changeLanguage，并在用户切换语言时更新 URL。

快速检查

i18next-http-backend 插件的作用是什么？

回顾

使用 i18n.changeLanguage() 构建语言切换器。使用 localStorage 检测器持久化选择。使用 i18next-http-backend 延迟加载翻译文件。切换语言时显示加载状态。在生产环境中将文件托管到 CDN 上。

课程完成

恭喜您！您已完成 **React 中的国际化（i18n）**。现在您可以设置 react-i18next，使用命名空间翻译字符串，处理复数形式和插值，并延迟加载翻译文件。

常见问题解答

「语言切换器与翻译延迟加载」课时是免费的吗？

是的 — 「语言切换器与翻译延迟加载」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「语言切换器与翻译延迟加载」这节课中我会学到什么？

构建区域设置切换器，并按需加载翻译包，以减小初始体积。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「语言切换器与翻译延迟加载」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 设置 react-i18next
  2. 使用 useTranslation 钩子
  3. 复数形式与插值
  4. 语言切换器与翻译延迟加载
← 返回 React Academy