react i18n国际化配置

 Quick start - react-i18next documentation

1.安装

cnpm i react-i18next i18next -S

2. 基本和官网差不多，只是分离了中英文的json文件

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

import translation_en from "./en.json";
import translation_zh from "./zh.json";

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

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "zh",
    // 需要链式调用messages.welcome
    // keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

3.引入 index.jsx

import "./i18n/configs"

4.使用

zh.json

{
    "header": {
        "slogan": "让旅行更幸福",

HOC使用 

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

class HeaderComponnet extends React.Component<
  RouteComponentProps & WithTranslation,
  State
> { {t("header.add_new_language")}}
export const Header = withTranslation()(withRouter(HeaderComponnet));

Hook使用

import { useTranslation } from "react-i18next";
const { t } = useTranslation();
  {t("footer.detail")}