在做项目的时候，有时候要做多语言的，引入国际化，如果自己手动实现的话会是非常棘手的一件事儿，这里可以借助第三方库来实现，这里用到了两个库，i18next（提供了翻译的基本能力）和 react-i18next（是 i18next 的一个插件，用来降低 react 的使用成本）

1、安装第三方库

// 如果安装失败，可能是因为版本的原因，可以强制安装（--force）或者安装低版本的
npm install i18next react-i18next

2、创建需要翻译的语言文件，如中文 zh.js 和英文 en.js 文件

// /src/locales/language/zh.js
const zh = {
  home: {
    title: "首页",
  }
};
export default zh;


// /src/locales/language/en.js
const en = {
  home: {
    title: "Home",
  }
}
export default en;

3、创建初始化语言文件，并在项目入口文件 index.js 中直接引入即可

// /src/locales/index.js
import { initReactI18next } from "react-i18next";
import i18n from "i18next";
import zh from './language/zh';
import en from './language/en';

i18n.use( initReactI18next ).init( {
  resources: {
    en: {
      translation: {
        ...en
      }
    },
    zh: {
      translation: {
        ...zh
      }
    }
  },
  // interpolation: {  
  //   escapeValue: false // 不要做转义
  // },
  lng: "en", // 默认语言
  fallbackLng: "en", // 如果当前语言没有对应的翻译，将使用该语言作为备用
})

// /src/index.js
import "./locales/index"

4、创建组件，在组件中使用。

import React from 'react'
import { useTranslation } from 'react-i18next'

export default function Translation () {
  const { i18n, t } = useTranslation()
  const changeLanguage = (language) => {
    i18n.changeLanguage(language)  // 切换语言
  }
  return (
    <>
      <p>当前语言：{ i18n.language }</p>
      <p>当前内容：{ t( 'home.title' ) }</p>
      <button onClick={() => changeLanguage('zh')}>切换为中文</button>
      <button onClick={() => changeLanguage('en')}>切换为英文</button>
    </>
  )
}