React-i18next切換中英文

https://zhuanlan.zhihu.com/p/94788672

https://github.com/i18next/react-i18next/pull/759/files

1. 安裝依賴

yarn add react-i18next i18next i18next-browser-languagedetector

2. 配置多語言json

/locales/en-us.json：

{
    "user": {
        "user_management": "User Management",
        "user_id": "User ID",
        "status": "Status",
        "role": "Role",
        "search": "Search",
        "reset": "Reset",
        "add_new": "Add New",
        "edit_user": "Edit User",
        "add_user": "Add User",
        "first_name": "First Name",
        "last_name": "Last Name",
        "email_address": "Email Address",
        "operate": "Operate"
    }
}

/locales/zh-cn.json：

{
    "user": {
        "user_management": "用戶管理",
        "user_id": "用戶 ID",
        "status": "狀態",
        "role": "角色",
        "search": "搜索",
        "reset": "重置",
        "add_new": "添加用戶",
        "edit_user": "編輯用戶",
        "add_user": "添加用戶",
        "first_name": "名字",
        "last_name": "姓",
        "email_address": "郵箱地址",
        "operate": "操作"
    }
}

 3. 定義i18n.tsx：

import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from 'i18next';
import enUsTrans from './locales/en-us.json';
import zhCnTrans from './locales/zh-cn.json';
import { initReactI18next } from 'react-i18next';

i18n
  .use(LanguageDetector) //嗅探當前瀏覽器語言
  .use(initReactI18next) //init i18next
  .init({
    //引入資源文件
    resources: {
      en: {
        translation: enUsTrans,
      },
      zh: {
        translation: zhCnTrans,
      },
    },
    //選擇默認語言，選擇內容為上述配置中的key，即en/zh
    fallbackLng: 'en',
    debug: false,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

export default i18n;

4. 在主入口文件_app.tsx中引用i18n.tsx

import './i18n';

5. 高階組件中使用

import { withTranslation, WithTranslation } from 'react-i18next';

export class UserManagement extends React.Component<IUserProps & WithTranslation> {}
export default withTranslation()(UserManagement);