我正在做一个react-typescript应用程序，我需要能够翻译网站。我正在使用i18 next库。在主页中，用户可以使用运行此方法的按钮来更改语言。

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

这对于改变主页的语言非常有效。但是当我转到下一页时，它又回到了原来的语言。我似乎不能让整个网站运行在不同的语言上。
我的索引.tsx文件

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();

我的网站上的所有页面都具有以下结构：

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)

正如你所看到的，我使用i18next.t（'my-key'）来获取翻译，并使用“withTranslation（）"导出每个组件/页面。所以我不知道为什么整个网站不改变语言。有人能帮助我吗？