React国际化工作流设置指南
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.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', // 默认语言
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. 创建组件
创建 Home
和 About
组件,并在其中使用 t
函数来获取翻译文本:
// 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. 运行应用程序
现在你可以运行你的应用程序,并看到不同语言的翻译文本:
npm start
这样,你就完成了一个简单的 React 国际化工作流设置。你可以根据需要扩展这个示例,添加更多的语言和翻译文本。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo6@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。版权声明:如无特殊标注,文章均为本站原创,转载时请以链接形式注明文章出处。
评论