React 使用 i18next 实现国际语言切换翻译

引入 i18next 依赖

引入 i18next 和 react-i18next

bash 复制代码
npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

总结

依赖 作用
i18next 核心国际化库,提供翻译功能和资源管理。
i18next-http-backend 动态加载语言资源文件,避免将所有语言包打包到代码中,支持按需加载。
react-i18next i18next 与 React 集成,提供 React 特有的功能(如 Hooks 和 Context)。
i18next-browser-languagedetector 自动检测用户的浏览器语言偏好,并设置为默认语言,提升用户体验。

配置 i18next

js 复制代码
public/ 
└── locales/ 
    ├── en.json
    ├── index.ts
    └── zh.json

基础配置

核心文件 index.ts

js 复制代码
import i18next from 'i18next';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import enUsTrans from './en.json';
import zhCnTrans from './zh.json';

// 可动态传入翻译类型及其对应文件
const resources = {
    'en-US': {
        translation: enUsTrans,
    },
    'zh-CN': {
        translation: zhCnTrans,
    },
};

i18next
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        resources,
        fallbackLng: 'zh-CN', // 默认语言
        backend: {
            loadPath: '/locales/{{lng}}/{{ns}}.json', // 你的翻译文件所在的路径
        },
        // 检测到的语言可以在这里进行重写
        detection: {
            order: ['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator'],
            caches: ['cookie'], // 缓存检测到的语言
        },
        // react i18next special options (optional)
        // override if needed - full list can be found in the documentation
        react: {
            useSuspense: false, // Set to true if you're using React Suspense
        },
    });

export default i18next;

语言文件 .json

英文

json 复制代码
{
    "welcome": "Welcome",
    "description": "This is a simple internationalization example.",
    "greeting": "hello, {{name}}"
}

中文

json 复制代码
{
    "welcome": "欢迎",
    "description": "这是一个简单的国际化示例。",
    "greeting": "你好, {{name}}"
}

程序文件 App.jsx

当前文件供参考,可根据实际情况进行调整

jsx 复制代码
import React, {useState} from 'react';
import { useTranslation } from 'react-i18next';

const App = () => {
    const { t, i18n } = useTranslation();
    const [currentLocale, setCurrentLocale] = useState('zh-CN');

    // 切换语言
    const changeLocale = (locale) => {
        setCurrentLocale(locale); 
        localStorage.setItem('language', locale); // 保存至 localStorage 确保刷新页面不失效
        i18n.changeLanguage(locale); // 切换匹配语言
    };

    return (
        <div>
            {/* 简单翻译 */}
            <h1>{t('welcome')}</h1>
            <p>{t('greeting', { name: 'Alice' })}</p>
            
            <button onClick={() => changeLocale('en-US')}>English</button>
            <button onClick={() => changeLocale('zh-CN')}>中文</button>
        </div>
    );
};

export default App;
相关推荐
Codebee几秒前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能
叫我詹躲躲4 分钟前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊5 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅7 分钟前
JavaScript 函数详解
前端·javascript
金金金__9 分钟前
antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for...
前端
会豪10 分钟前
工业仿真(simulation)--前端(二)-资源管理器
前端
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css