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;
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴6 小时前
简单入门Python装饰器
前端·python
袁煦丞7 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作