Блог

Я создаю приложение 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 («мой ключ») для получения переводов, и я экспортирую каждый компонент/страницу с помощью » withTranslation ()». Поэтому я не знаю, почему весь сайт не меняет язык. Кто-нибудь может мне помочь?

Поэтому я думаю, что проблема здесь в том, что вы импортируете i18next из библиотеки на каждой странице. Что вам нужно сделать, так это экспортировать i18n, созданный в вашем индексном файле, и импортировать его в любой другой файл вместо импорта нового i18next для каждого компонента, который у вас там есть. Также попробуйте поместить языковое значение всего веб-сайта в какой-то глобальный контекст, если вы хотите изменить язык на других страницах. Я надеюсь, что это было полезно!