使用 i18n for Outlook 插件在 React Router DOM 中实现多语言翻译

Question

我正在开发一个 Outlook 插件，使用 React Router DOM 进行路由。我正在尝试使用 i18n 实现多语言翻译功能，但在使其正常工作方面遇到困难。谁能指导我实现这一目标的正确方法？

我尝试集成 i18n 并设置翻译文件，但翻译未按预期工作。下面是我的代码的简化版本： 我还正确设置了 i18n 配置和翻译文件。然而，翻译并没有反映在我的组件中。谁能建议使用 React Router DOM 和 i18n 实现多语言翻译的正确方法？

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import Login from "./pages/Login";
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <Router>
        <Route path="/" exact component={HomePage} />
        <Route path="/login" component={Login} />
      </Router>
    </I18nextProvider>
  );
}

export default App;````

Answer 1

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from './locales/en/translation.json';
import translationFR from './locales/fr/translation.json';

const resources = {
  en: {
    translation: translationEN
  },
  fr: {
    translation: translationFR
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;