React中使用react-i18next

i18n

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。

react-i18next

安装

npm
```
npm install eact-i18next i18next
```
yarn
```
yarn add react-i18next i18next 
```

使用

在src下创建i18n.js并配置

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {
    // 语言已经对应的变量名已经语言相对的值，这里是测试使用，需要的可以把这些键值提出保存为json再导入
    en: {
        translation: {
            "test": "test"
        }
    },
    zh_CN: {
        translation: {
            "test": "测试"
        }
    }
};

i18n
    .use(initReactI18next) 
    .init({
        resources,
        fallbackLng: 'zh_CN',
        lng: 'zh_CN', // 默认语言

        keySeparator: false, 

        interpolation: {
            escapeValue: false 
        }
    });

export default i18n;

在index.js中引入i18n

import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
import './i18n';
import './index.css';

const App = lazy(() => import('./App.js'))

ReactDOM.render(
  <Suspense fallback={<div>Loading</div>}>
    <App />
  </Suspense>,
  document.getElementById('root')
);

在App.js中测试

import './App.css'
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

    // 修改i18n中的默认语言
  const change = () => {
    i18n.changeLanguage(i18n.language === 'en' ? 'zh_CN' : 'en')
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>
          {t("test")}
        </p>
        <br></br>
        <br></br>
        <button onClick={ change }>切换</button>
      </header>
    </div>
  );
}
export default App;

这里使用的是

{t("test")} // test是配置在语言里的键  以展示对应的值

效果