React App에서 i18n을 구현하는 방법

먼저 라이브러리 설치

react-i18next, i18next 및 i18next-http-backend의 모든 라이브러리를 설치해야 합니다.

npm install react-i18next i18next i18next-http-backend --save

이제 src 파일에 구성 파일을 만듭니다. React App

이름이 i18n.js인 파일과 아래 내용

import i18n from "i18next";
import backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";

i18n
  .use(backend)
  .use(initReactI18next)
  .init({
    lng: "pt",
    fallbackLng: "pt",
    interpolation: {
      escapeValue: false
    },
    react: {
      bindI18n: 'languageChanged',
      useSuspense: false,
    }
  });

export default i18n;

React App의 index.js에서 이 파일 i18n.js를 가져옵니다.

구성 앱에서 파일 i18n.js 및 공급자를 가져오는 사용법

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

그리고 렌더 앱에서 이 공급자를 사용합니다.

 <I18nextProvider i18n={i18n}>
   <App />
 </I18nextProvider>

공급자 및 가져오기가 포함된 index.js의 예

React 앱에서 구현 가져오기 및 제공자를 사용한 다음 예

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.scss';
import App from './App';

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>
);

좋습니다. 이제 번역 파일을 만들고 구성 요소에 사용법을 만들어야 합니다.

번역 로케일 파일 생성

공용 폴더에서 이름 로케일로 이 폴더를 생성하고 로케일 폴더에서 번역 파일의 en, pt 또는 es 이름과 같은 모든 폴더를 생성해야 합니까?
폴더 안에는 번역 발생과 함께 translate.json이라는 이름의 json을 생성해야 합니다. 예를 들어 아래의 json을 따르세요.

이름 파일: locales/en/translate.json

{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}

이름 파일: locales/pt/translate.json

{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}

이름 파일: locales/es/translate.json

{
  "languages": {
    "pt": "Portugués",
    "en": "Inglés",
    "es": "Español"
  },
  "title": {
    "config": "Configurações"
  }
}

영어, 포르투갈어 및 스페인어를 번역하는 아주 좋은 파일

이제 구성 요소에서 번역을 사용합니다.

이제 구성 요소에서 사용 번역이 필요하고 후크 useTranslation을 사용하여 로케일의 언어를 변경하기 위한 선택 또는 버튼을 생성합니까?

선택 언어 변경이 있는 구성 요소의 기본 사용 예

import React from 'react';
import { useTranslation } from 'react-i18next';

function AppLanguage() {
  const { t, i18n } = useTranslation();

  return (
    <React.Fragment>
      <h1>{t('title.config')}</h1>
      <select
        className="App-language"
        name="language"
        value={i18n.language}
        onChange={e => i18n.changeLanguage(e.target.value)}
      >
        <option value="pt">{t('languages.pt')}</option>
        <option value="en">{t('languages.en')}</option>
        <option value="es">{t('languages.es')}</option>
      </select>
    </React.Fragment>
  );
}

export default AppLanguage;

완료 당신은 좋은 해커이고 당신의 React 앱은 전 세계 많은 사람들을 위한 많은 언어와 국제적 접근으로 내부화되어 있습니다. 당신을 위한 좋은 연구와 멋진 #hacktoberfest

참조

참조가 필요한 경우 더 많은 예제와 함께 아래 목록을 따르십시오.

공식 사이트 react-i18next

실제 구현으로 작업하는 프로젝트Google React

Github의 내 프로필@lucasferreiralimax

도움이 필요하세요?

나에게 댓글을 달거나 이야기하십시오.
도움이 되고 싶고 만나서 반가워요.