使用生产构建处理使用 React 应用程序的电子邮件验证答案

【问题标题】：Handling email verification with a React app using production build使用生产构建处理使用 React 应用程序的电子邮件验证
【发布时间】：2020-05-27 11:47:37
【问题描述】：

我们有一个单页应用程序（使用 create-react-app 创建），它在浏览器中使用 React，在后端使用 nodejs/express 服务器。该应用程序允许用户注册、登录和执行各种功能。用户使用电子邮件地址注册后，React 应用程序（通过我们的后端服务器）向用户发送一封电子邮件，其中包含电子邮件验证链接。用户点击在浏览器中打开的链接（例如 example.com/accountVerification/:id）。一旦打开 React 应用程序，然后使用后端服务器验证电子邮件地址，用户现在就可以登录了。

当使用开发版本运行 React 应用程序时，这一切都可以正常工作，即使用“npm start”。

但是，在生产环境中，我们会部署使用“npm run build”生成的生产构建版本。我们使用 nginx 为应用程序提供服务。在此环境中，nginx 已配置为提供在构建过程中生成的 index.html 文件。同样，一切正常，除非使用提供 404 的电子邮件验证链接。似乎 url 中“/”之后的任何尾随页面都会失败并导致 404。

所以问题是，在使用 React 应用程序的生产版本时，电子邮件验证链接应该如何工作？或者更一般地说，为什么在运行 React 应用的生产版本时浏览器刷新失败 (404)？

【问题讨论】：

这能回答你的问题吗？ React-router and nginx
@pedro-rio，这部分回答了我的问题。但是，我仍在尝试弄清楚如何支持电子邮件验证链接。
抱歉回复延迟！我确实解决了我的问题。这是因为电子邮件验证链接的端口错误。因此它失败了。

标签： reactjs email-verification

【解决方案1】：

你必须配置 nginx 为所有路由提供 index.html，所以添加：

location / { try_files $uri /index.html; }

到你的 nginx 配置。

【讨论】：

佩德罗，感谢您的回复。这有帮助！有了这个改变，当我重新加载页面时，我不再得到 404 并且加载了 index.html 文件。但是，电子邮件验证问题仍然存在，因为 nginx 正在服务 index.html，它相当于“/”。如何将 url 传递给 React 应用程序，以便它访问我的验证组件，然后回调后端服务器？