react 实现国际化
使用 react-i18next 实现国际化
react-i18next 是基于 i18next 的 React 国际化库，提供完整的国际化解决方案
安装依赖包：
npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector创建 i18n 配置文件（i18n.js）：
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
interpolation: {
escapeValue: false,
}
});
export default i18n;创建语言资源文件
在 public 目录下创建 locales 文件夹，结构如下：
public/
locales/
en/
translation.json
zh/
translation.json示例英文翻译文件（en/translation.json）：
{
"welcome": "Welcome to our application",
"changeLanguage": "Change language"
}在组件中使用翻译
使用 useTranslation hook：
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t, i18n } = useTranslation();
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};
return (
<div>
<h1>{t('welcome')}</h1>
<button onClick={() => changeLanguage('en')}>English</button>
<button onClick={() => changeLanguage('zh')}>中文</button>
</div>
);
}使用 Trans 组件处理复杂翻译
对于包含 HTML 或变量的复杂翻译：
import { Trans } from 'react-i18next';
function ComplexComponent() {
return (
<Trans i18nKey="complexText">
This is a <strong>complex</strong> text with <a href="#">link</a>
</Trans>
);
}对应的翻译文件需要：
{
"complexText": "This is a <1>complex</1> text with <2>link</2>"
}服务端渲染支持
对于 Next.js 等 SSR 框架，需要额外配置：
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
function MyApp({ Component, pageProps }) {
return (
<I18nextProvider i18n={i18n}>
<Component {...pageProps} />
</I18nextProvider>
);
}命名空间支持
对于大型项目可以使用命名空间分隔翻译：
i18n.init({
ns: ['common', 'home', 'about'],
defaultNS: 'common'
});使用命名空间翻译：
const { t } = useTranslation('home');
t('home:welcome');动态加载语言包
优化性能可以按需加载语言包：
i18n.use(Backend).init({
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json'
}
});
