React國際化工作流設(shè)置指南

React 國際化（i18n）是一種讓應(yīng)用程序支持多種語言的方法。以下是一個(gè)簡單的 React 國際化工作流設(shè)置指南，使用 react-i18next 和 react-router-dom 庫。

1. 安裝依賴

首先，你需要安裝 react-i18next 和 react-router-dom：

npm install react-i18next i18next
npm install react-router-dom

2. 初始化 i18next

在項(xiàng)目根目錄下創(chuàng)建一個(gè) i18n.js 文件，并初始化 i18next：

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

const resources = {
  en: {
    translation: {
      "welcome": "Welcome to React",
      "change_language": "Change Language"
    }
  },
  zh: {
    translation: {
      "welcome": "歡迎來到 React",
      "change_language": "切換語言"
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en', // 默認(rèn)語言
    keySeparator: false,
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

3. 配置路由

在你的 App.js 文件中，使用 react-router-dom 配置路由，并使用 i18next 提供的 useTranslation 鉤子來獲取翻譯文本：

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Home from './Home';
import About from './About';

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

  const changeLanguage = (e) => {
    i18n.changeLanguage(e.target.value);
  };

  return (
    <Router>
      <div>
        <h1>{t('welcome')}</h1>
        <select onChange={changeLanguage}>
          <option value="en">English</option>
          <option value="zh">中文</option>
        </select>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

4. 創(chuàng)建組件

創(chuàng)建 Home 和 About 組件，并在其中使用 t 函數(shù)來獲取翻譯文本：

// Home.js
import React from 'react';
import { useTranslation } from 'react-i18next';

function Home() {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('home')}</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;

// About.js
import React from 'react';
import { useTranslation } from 'react-i18next';

function About() {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('about')}</h2>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;

5. 運(yùn)行應(yīng)用程序

現(xiàn)在你可以運(yùn)行你的應(yīng)用程序，并看到不同語言的翻譯文本：

npm start

這樣，你就完成了一個(gè)簡單的 React 國際化工作流設(shè)置。你可以根據(jù)需要擴(kuò)展這個(gè)示例，添加更多的語言和翻譯文本。