i18next/i18n 更改语言不适用于整个网站

Question

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

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

这对于更改主页的语言非常有用。但是，当我转到下一页时，它又回到了原始语言。我似乎无法让整个网站以不同的语言运行。

我的 index.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()”导出每个组件/页面。所以我不知道为什么整个网站不改变语言。谁能帮帮我？

Answer 1

所以我认为这里的问题是您要从每个页面的库中导入 i18next。您应该做的是导出在索引文件中创建的 i18n 并将其导入到其他每个文件中，而不是为那里的每个组件导入新的 i18next。还可以尝试将整个网站的语言值放在某种全球范围内，以防您想更改其他页面中的语言。我希望这会有所帮助！