DEV Community
·
React i18next中的多语言支持（简单示例）
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
本文介绍了如何在React项目中使用i18next实现多语言支持，包括安装依赖、创建JSON翻译文件、配置i18n.js加载文件、使用useTranslation钩子加载翻译，以及设置路由以支持语言切换，最终实现用户语言选择的持久化。
🎯
关键要点
- 步骤1：安装所需依赖，使用命令npm install react-i18next i18next i18next-http-backend。
- 步骤2：在public文件夹中创建每种语言的JSON翻译文件。
- 步骤3：创建i18n.js文件，配置i18next，设置语言和命名空间。
- 步骤4：在组件中使用useTranslation钩子加载翻译。
- 步骤5：在其他页面中同样使用useTranslation钩子。
- 步骤6：确保在App.js或路由中正确设置路由以加载翻译。
- 步骤7：测试语言切换功能，确保翻译在页面间更新。
- 结论：命名空间用于组织每个页面或组件的翻译，useTranslation钩子根据当前命名空间加载翻译，i18next-http-backend插件从服务器加载JSON文件，LocalStorage帮助在会话间持久化所选语言。
➡️
