How to add multilingualism to my application using i18n React - i18next

Question

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './routes/Home';
import Pricing from './routes/Pricing';
import Portfolio from './routes/Portfolio';
import Booking from './routes/Booking';
import { withTranslation } from 'react-i18next';
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import fr from './locales/he.json';
import LanguageSwitcher from './LanguageSwitcher';
class App extends React.Component {
componentDidMount() {
i18next
.use(initReactI18next)
.init({
resources: {
en: {
translation: en
},
he: {
translation: he
}
},
lng: 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});
}
render() {
const { t } = this.props;
return (
<>
<LanguageSwitcher />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/pricing" element={<Pricing />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/booking" element={<Booking />} />
</Routes>
</>
);
}
}
export default withTranslation()(App);

Answer 1

If you're using the withTranslation HOC, you may have a look at this example:
// use hoc for class based components
class LegacyWelcomeClass extends Component {
render() {
const { t } = this.props;
return <h2>{t('title')}</h2>;
}
}
const Welcome = withTranslation()(LegacyWelcomeClass);
I would also suggest to checkout this guide about react-i18next.