title: i18next/i18n Change Language not working with the whole website
body: <p>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.</p>
  <pre><code>changeLang(lang:string):any{
          i18next.changeLanguage(lang).then(() =&gt; {
              this.props.close(); 
              i18next.options.lng = lang;
          });
      }
  </code></pre>
  <p>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.</p>
  <p>My index.tsx file</p>
  <pre><code>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 &quot;./aws-exports&quot;;
  
  import * as enTranslations from &quot;./locales/en&quot;; /* This import refers to all of the texts in english */
  import * as ptTranslations from &quot;./locales/pt&quot; /* 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 &quot;i18next-browser-languagedetector&quot;; /* Import needed for the use of the dictionary/translation  */
  import i18next from &quot;i18next&quot;; /* 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(
    &lt;I18nextProvider i18n={i18n}&gt;
      &lt;App /&gt;
    &lt;/I18nextProvider&gt;,
    document.getElementById('root')
  );
  
  reportWebVitals();
  </code></pre>
  <p>All the pages on my website have the following structure:</p>
  <pre><code>import { Component } from &quot;react&quot;
  import { AuthProps } from &quot;../../@types/auth&quot;  // Imports Auth props used to authenticate user
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot; /* Import needed to be able to use the custom FontAwesome font */
  import { faChevronLeft } from &quot;@fortawesome/free-solid-svg-icons&quot; /* Import needed to get the desired font elements */
  
  import i18next from &quot;i18next&quot;; /* 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&lt;AuthProps&gt; {
    render() {
      return (
        &lt;div className=&quot;change-password-confirm-background&quot;&gt;  
        &lt;div className=&quot;change-password-confirm-main&quot;&gt;
          &lt;div className=&quot;change-password-confirm-container&quot;&gt;
            {/* Button used to go back to the login page */}
            &lt;a href=&quot;/login&quot; className=&quot;back&quot;&gt;&lt;FontAwesomeIcon icon={faChevronLeft}&gt;&lt;/FontAwesomeIcon&gt;&lt;/a&gt;  
            &lt;h1&gt;{i18next.t('ChangePasswordConfirm.catchphrase')}&lt;/h1&gt;
            &lt;p&gt;{i18next.t('ChangePasswordConfirm.secondaryText')}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      )
    }
  }
  
  
  export default withTranslation()(ChangePasswordConfirmation)
  </code></pre>
  <p>As you can see I use i18next.t('my-key') to get the translations and I export every component/page with &quot;withTranslation()&quot;. So I don't know why the whole website doesn't change language. Can anyone help me?</p>