React国际化工作流设置指南

蜗牛互联网技术资讯2024-11-1510

React 国际化（i18n）是一种让应用程序支持多种语言的方法。以下是一个简单的 React 国际化工作流设置指南，使用 react-i18next 和 react-router-dom 库。

1. 安装依赖

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

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

2. 初始化 `i18next`

在项目根目录下创建一个 i18n.js 文件，并初始化 i18next：

// i18n.jsimport 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', // 默认语言 keySeparator: false, interpolation: { escapeValue: false }
  }); export default i18n;

3. 配置路由

在你的 App.js 文件中，使用 react-router-dom 配置路由，并使用 i18next 提供的 useTranslation 钩子来获取翻译文本：

// App.jsimport 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. 创建组件

创建 Home 和 About 组件，并在其中使用 t 函数来获取翻译文本：

// Home.jsimport 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.jsimport 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;