反应本地化 - 国际化I18Next

Question

我想在项目中添加语言。

我使用I18Next。我添加I18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// Importing translation files

import translationEN from "./locales/en/translation.json";
import translationFA from "./locales/fa/translation.json";


 //Creating object with the variables of imported translation files
const resources = {
en: {
    translation: translationEN,
},
fa: {
    translation: translationFA,
},
};

//i18N Initialization

i18n
.use(initReactI18next)
.init({
    resources,
    lng: "fa", //default language
    keySeparator: false,
    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

将其添加到INDEX中，

import "./i18n"

添加登录

import { useTranslation } from "react-i18next";

function Login(props) {
const { t } = useTranslation();
var classes = useStyles();
...
  <Typography variant="h1" className={classes.greeting}>
                          {t('Login')}
  </Typography>
}

export default withRouter(Login);

时，我不会遇到任何错误，但显示空白页。