React 使用i18next配置多语言

目录

1.安装

2.新建目录

3.创建i18n配置文件

4.语言包格式

5.开始使用

---

1.安装

npm install react-i18next i18next

yarn add react-i18next i18next

2.新建目录

在src下新建lang文件夹，以存放语言包和i18n的配置文件；

3.创建i18n配置文件

在lang文件下新建jsx、js或tsx文件（例如：命名为config.js）

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
//中文语言包
import zh from './zh.json';
//英文语言包
import en from './en.json';

const resources = {
  en: {
    translation: en
  },
  zh: {
    translation: zh
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'zh',//设置默认语言（可用三元表达式进行动态切换）
  interpolation: {
    escapeValue: false
  }
});

export default i18n;

4.语言包格式

zh.json

{
  "login": {
    "register": "注册",
    "signin": "登录",
    "home": "首页"
  },
  "footer": {
    "text": "版权所有 @ React"
  },
  "home": {
    "title": "首页"
  },
}

5.开始使用

首先在index.jsx中引入国际化配置文件

import './i18n/config';

页面中使用

import React from 'react';
import { useTranslation } from 'react-i18next';
function Home() {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <p>{t('login.home')}</p>
    </div>
  );
}
export default Home;

切换语言

//一般是在点击事件、change事件函数中进行改变。根据自己的语言包进行切换、切换之后可以本地存储保存
i18n.changeLanguage('en')//切换英文
i18n.changeLanguage('zh')//切换中文