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;
相关推荐
三天不学习1 分钟前
CSS :root伪类详解:实现动态主题切换的关键所在
前端·css·root·主题换肤·css 伪类
江城开朗的豌豆4 分钟前
Vue图片懒加载:极简方案 vs 兼容全攻略
前端·javascript·vue.js
oil欧哟7 分钟前
🧐 AI 批量检查数千份技术文档,如何实现高效文档纠错?
前端·人工智能·ai编程
江城开朗的豌豆9 分钟前
Vue组件data必须用函数?这个设计暗藏玄机!
前端·javascript·vue.js
前端小巷子16 分钟前
web域名解析
前端·javascript·面试
LaoZhangAI17 分钟前
沉浸式翻译API深度解析:500万用户的翻译神器如何配置[2025完整指南]
前端·后端
然我24 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆24 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder32 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang40 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构