i18next/i18n Change Language not working with the whole website

Question

I'm doing a react-typescript app where I need to be able to translate the site. I'm using the i18next library. In the main page the user can change the language using a button which runs this method.

changeLang(lang:string):any{
        i18next.changeLanguage(lang).then(() => {
            this.props.close(); 
            i18next.options.lng = lang;
        });
    }

This works great for changing the language of the main page. However when I go to the next page it goes back to the original language. I can't seem to get the whole site running on a different language.

My index.tsx file

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import awsmobile from "./aws-exports";

import * as enTranslations from "./locales/en"; /* This import refers to all of the texts in english */
import * as ptTranslations from "./locales/pt" /* This import refers to all of the texts in portuguese */
import {initReactI18next, I18nextProvider} from 'react-i18next'; /* Import needed for the use of the dictionary/translation  */
import LanguageDetector from "i18next-browser-languagedetector"; /* Import needed for the use of the dictionary/translation  */
import i18next from "i18next"; /* Import needed for the use of the dictionary/translation  */


/* Configure Amplify on the client so that we can use it to interact with our backend services */
Amplify.configure(awsmobile);

/* Extract the translations */
const resources = {
  en: {messages: enTranslations}, 
  pt: {messages: ptTranslations}
};

/* Setting up the dictionary/translator */
const i18n = i18next.use(LanguageDetector).use(initReactI18next);

i18n.init({
  react: {
      wait: true,
  },
  resources: resources,
  lng: 'pt', /* Main Language */
  fallbackLng: 'en',
  keySeparator: '.',
  interpolation: {
      escapeValue: false,
  },
  ns: ['messages'],
  defaultNS: 'messages',
  fallbackNS: [],
});


ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <App />
  </I18nextProvider>,
  document.getElementById('root')
);

reportWebVitals();

All the pages on my website have the following structure:

import { Component } from "react"
import { AuthProps } from "../../@types/auth"  // Imports Auth props used to authenticate user
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" /* Import needed to be able to use the custom FontAwesome font */
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons" /* Import needed to get the desired font elements */

import i18next from "i18next"; /* Import needed for the use of the dictionary/translation  */
import { withTranslation } from 'react-i18next'; /* Import needed for the use of the dictionary/translation  */

import '../styles/views/change-password-confirm.css';


/**
 * Simple page that tells our user that his password has been changed
 */
class ChangePasswordConfirmation extends Component<AuthProps> {
  render() {
    return (
      <div className="change-password-confirm-background">  
      <div className="change-password-confirm-main">
        <div className="change-password-confirm-container">
          {/* Button used to go back to the login page */}
          <a href="/login" className="back"><FontAwesomeIcon icon={faChevronLeft}></FontAwesomeIcon></a>  
          <h1>{i18next.t('ChangePasswordConfirm.catchphrase')}</h1>
          <p>{i18next.t('ChangePasswordConfirm.secondaryText')}</p>
        </div>
      </div>
    </div>
    )
  }
}


export default withTranslation()(ChangePasswordConfirmation)

As you can see I use i18next.t('my-key') to get the translations and I export every component/page with "withTranslation()". So I don't know why the whole website doesn't change language. Can anyone help me?

Answer 1

So I think the problem here is that you're importing i18next from the library on every page. What you're supposed to do is that you export the i18n you created in your index file and import it in every other file instead of importing a new i18next for every component you have there. Also try putting the language value of the whole website in some kinda global context incase you wanna change the language in other pages. I hope this was helpful!