Implementing Multi-language Translation in React Router DOM with i18n for Outlook Add-ins

Question

I'm working on an Outlook add-in using React Router DOM for routing. I'm trying to implement multi-language translation functionality using i18n, but I'm facing difficulties in getting it to work properly. Can anyone guide me on the proper approach to achieve this?

I've tried integrating i18n and setting up translation files, but the translations are not working as expected. Below is a simplified version of my code: I've also set up i18n configuration and translation files properly. However, the translations are not reflecting in my components. Can anyone suggest the correct way to implement multi-language translation with React Router DOM and 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;