使React应用成为多语言的正确方法

Question

我试图找到一种方法来使我的应用程序变为多语言，例如，当用户单击“ zh”时，所有应用程序都变为英语，而当用户单击“ de”时，所有应用程序都变为德语。我正在使用没有状态管理库的React。有办法正确实现吗？

Answer 1

以下是最受欢迎的React国际化库

• https://github.com/i18next/react-i18next
• https://github.com/yahoo/react-intl

此外，如果您的项目很小，或者您只想自己做，那么最简单的方法是将lang数据存储在路由器中，例如您在不同的URL上呈现相同的组件

<Route path="/shop" component={Shop} />  // en is default
<Route path="de/shop" component={Shop} />

然后在组件内部，您从路由器获取lang变量，并有条件地呈现此翻译或该翻译。

您的语言切换器会做什么-只是将您导航到其他路线上的相同组件，例如：/shop-> /de/shop

您可以将翻译数据作为纯JS对象存储在本地文件中，也可以从后端获取。