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;
相关推荐
右子21 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋34 分钟前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort38 分钟前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记40 分钟前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com1 小时前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1111 小时前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm1111 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
@大迁世界1 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
小白64021 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs
Hy行者勇哥1 小时前
数据中台的数据源与数据处理流程
大数据·前端·人工智能·学习·个人开发