React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

# npm
npm install react-i18next i18next --save
# 如果需要检测当前浏览器的语言或者从服务器获取配置资源可以安装下面依赖
npm install i18next-http-backend i18next-browser-languagedetector --save

npm install react-i18next i18next --save

{
	title: "Hello Word"
}

{
	title: "你好 世界"
}

import ja from "./ja.json";
import en from "./en.json";
import zh from "./zh.json";

export const resources = {
	"ja": {
		translation: ja
	},
	"en": {
		translation: en
	},
	"zh": {
		translation: zh
	}
}

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';

i18n
	// 将 i18n 实例传递给 react-i18next
	.use(initReactI18next)
	// 初始化 i18next
	// 所有配置选项: https://www.i18next.com/overview/configuration-options
	.init({
		resources,
		fallbackLng: "zh",
		lng: "zh",
		debug: true,
		interpolation: {
			escapeValue: false, // not needed for react as it escapes by default
		}
	});

export default i18n;

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "./react-i18next/i18n";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
	<App />
  </React.StrictMode>
);

import { useTranslation } from "react-i18next";

function App() {
  const { t } = useTranslation();
  return (
	<div className="App">
	  {t("title")}
	</div>
  );
}

export default App;

import React from "react";
import { withTranslation } from "react-i18next";

class App extends React.Component {

  render() {
	const { t } = this.props;
	return (<div className="App">
	  {t("title")}
	</div>);
  }
}

export default withTranslation()(App);

npm install i18next-browser-languagedetector --save

// src\react-i18next\i18n.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';

i18n
	// 检测用户语言
	// 操作文档: https://github.com/i18next/i18next-browser-languageDetector
	.use(LanguageDetector)
	// 将 i18n 实例传递给 react-i18next
	.use(initReactI18next)
	// 初始化 i18next
	// 所有配置选项: https://www.i18next.com/overview/configuration-options
	.init({
		resources,
		fallbackLng: "en",
		lng: navigator.language,
		debug: true,
		interpolation: {
			escapeValue: false, // not needed for react as it escapes by default
		}
	});

export default i18n;

// class 组件
const { t, i18n } = this.props;
i18n.changeLanguage("en"); 		// 手动切换到英文

// Hooks 组件
const { t, i18n } = useTranslation();
i18n.changeLanguage("zh"); 		// 手动切换到中文