静态 React 应用程序/网页多语言答案

【问题标题】：Static React App/Webpage Multi-language静态 React 应用程序/网页多语言
【发布时间】：2023-07-15 19:37:01
【问题描述】：

我花了一周的时间来解决这个问题，目前我正在使用 gatsby 来生成我的静态网络应用程序。我已经尝试过了

-pages 
--en 
---index.js 
---main.md 
---contact.md 
--zh 
---index.js 
---main.md 
---contact.md

这是一种工作，但仍然不是完美的解决方案。我正在考虑 impelent React-Intl，但我不确定。静态应用/网页可以吗？

还有其他建议吗？

【问题讨论】：

这似乎可以正常工作？您面临哪些问题？我见过的大多数多语言网站都像你正在做的不同语言页面的命名空间，例如/en/main/ & /zh/main/
react-intl 也可以与 Gatsby 一起正常工作。 Gatsby 将 React 与任何普通的 React/Webpack 项目一样对待，所以如果它在其他地方工作，它会在 Gatsby 中工作。

标签： reactjs react-intl gatsby

【解决方案1】：

我们使用Instant 作为 React 的多语言解决方案。我们有一个静态生成的 React 应用程序，我们将其部署到 S3 并通过 CloudFront 提供服务。在你的 React 路由器中，你可以确保所有路径都像/en/some-page 和/fr/some-page 一样被捕获。然后，根据这条路线，您在 Instant 中设置正确的语言环境，该工具将为访问者提供正确的语言。

【讨论】：

这样，你生成了很多文件。过了一会儿，它变得一团糟。许多文件很难控制。我发现 react-intl 做得更好。你可以有 n 种语言的 n json 文件，你就完成了。

【解决方案2】：

我目前的方法是同时使用react-intl 和Gatsby-plugin-i18n。所以我将页面内容保存在Gatsby-plugin-i18n 中，并将其他所有内容保存在 react-intl 中。到目前为止效果很好。

【讨论】：