React Academy · 课时

设置 react-i18next

Q: 「设置 react-i18next」这节课中我会学到什么？

安装并配置 i18next，实现语言检测和命名空间拆分。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安装并配置 i18next，实现语言检测和命名空间拆分。

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

欢迎

在本课中，您将安装并配置 react-i18next，通过语言检测和命名空间拆分为 React 应用添加多语言支持。

安装依赖

请安装 i18next 和 react-i18next。您还可以选择添加 i18next-browser-languagedetector，以自动检测区域设置；添加 i18next-http-backend，以通过 HTTP 加载翻译。

npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

创建 i18n.js

创建一个 `i18n.js` 文件来初始化 i18next。调用 `i18n.use(...)` 添加插件，并使用 `.init({...})` 传入配置。

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources: { en: { translation: {} }, tr: { translation: {} } },
    interpolation: { escapeValue: false },
  });

export default i18n;

在 main.jsx 中导入 i18n

请在渲染应用之前导入 i18n 初始化文件。这可以确保任何组件调用 useTranslation 之前，i18n 已经准备就绪。

import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

命名空间

命名空间会将翻译拆分为逻辑组（例如“common”“auth”“dashboard”）。每个命名空间都是一个单独的 JSON 文件，按需加载以减小初始打包体积。

resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

语言检测

LanguageDetector 插件会从浏览器（navigator.language）、localStorage 或 URL 查询字符串中读取用户偏好的语言。它会在首次加载时自动设置活动语言。

从公共文件夹加载翻译

将翻译作为 JSON 文件存储在 `public/locales/{lang}/{ns}.json` 中。配置后端插件在运行时加载这些文件，这样添加新语言就无需修改代码。

import Backend from 'i18next-http-backend';

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

I18nextProvider（可选）

I18nextProvider 会包装应用，通过上下文提供 i18n 实例。在 react-i18next v11 及更高版本中，配合 initReactI18next 插件使用时，这一步是可选的——钩子会直接读取全局 i18n 实例。

在组件中检查初始化状态

i18next 会异步加载翻译。请使用 useTranslation 返回的 `ready` 属性，或在渲染文本前检查 `i18n.isInitialized`，以避免显示翻译键。

const { t, ready } = useTranslation();
if (!ready) return null;

DevTools 与缺失键处理

在开发环境中将 `saveMissing: true` 设置为 true，以便将缺失的翻译键记录到控制台。这有助于您快速找出未翻译的字符串。

i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

快速检查

为什么必须在渲染 React 应用之前导入 i18n 初始化文件？

回顾

安装 i18next 和 react-i18next，使用插件和 init 配置创建 i18n.js，在渲染前导入它，并将翻译组织到命名空间中。使用 http-backend 在运行时加载翻译文件。

接下来

下一课：**使用 useTranslation 钩子**——您将用 t() 调用替换硬编码字符串，并整理 JSON 翻译文件。

常见问题解答

「设置 react-i18next」课时是免费的吗？

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

「设置 react-i18next」这节课中我会学到什么？

安装并配置 i18next，实现语言检测和命名空间拆分。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「设置 react-i18next」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy