部署的前端 React 应用程序中的子路径出现 404 错误问题

Question

[技术：ReactJS]

问题描述

构建并部署我的前端应用程序后，我在尝试直接访问子路径时遇到 404 错误。然而，访问主域（

example.in

）工作正常。例如，尝试直接访问

example.in/login

会导致 404 错误，但删除

/login

并首先访问

example.in

，然后通过应用程序导航到

login

，可以按预期工作。

示例场景

1. 直接访问像

   example.in/certificate/1/

   这样的子路径会导致404错误。
2. 访问主域 (

   example.in

   ) 并逐步导航到证书页面 (

   example.in/certificate/2/

   ) 工作正常。

观察

访问子路径似乎会直接导致 404 错误，而浏览应用程序却按预期工作。这种行为令人困惑，我不确定根本原因。

请求帮助

我正在寻求有关识别和解决导致直接访问子路径出现 404 错误的问题的指导。任何见解或建议将不胜感激。谢谢！

尝试：

1. 尝试使用 AWS S3、ACM（AWS 证书管理器）和 CloudFront 部署应用程序，遇到相同的 404 错误。
2. 尝试使用 Vercel 进行部署，但遇到类似问题。

预期结果：

我希望解决上述问题后，直接访问子路径时收到404错误的问题将得到解决。具体来说，我预计：

• 直接访问

  /login

  或

  /certificate/1/

  等子路径将成功加载相应页面，而不会遇到404错误。
• 无论用户是直接访问页面还是在应用程序中导航，应用程序都会正确处理路由。

Answer 1

修复ReactJS中直接访问子路径的404错误

问题描述

部署ReactJS前端应用后，直接访问子路径时遇到404错误。但是，访问主域工作正常。例如，尝试直接访问

example.in/login

会导致 404 错误，但从主域导航到

/login

可以按预期工作。

示例场景

直接访问像

example.in/certificate/1/

这样的子路径会导致404错误。 访问主域 (

example.in

) 并逐步导航到证书页面 (

example.in/certificate/2/

) 工作正常。

尝试

尝试使用 Vercel 和 AWS CloudFront 部署应用程序，遇到类似的 404 错误。

解决方案

对于 Vercel 部署：

将

vercel.json

文件添加到项目根目录，其中包含以下内容：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

此配置确保所有请求都定向到

index.html

，从而允许React Router正确处理路由。

对于 AWS CloudFront 部署：

1. 导航到 CloudFront 分配设置。
2. 转到错误页面。
3. 单击创建自定义错误响应。
4. 在错误响应部分：
   • 输入

     400

     作为 HTTP 错误代码。
   • 将错误缓存最小 TTL 设置为

     10

     。
   • 保持自定义错误响应未选中。
   • 将响应页面路径设置为

     /index.html

     。
   • 为

     HTTP 响应代码

     选择 200: OK。
5. 单击 创建 保存自定义错误响应。

此配置可确保 CloudFront 针对所有 404 错误返回

index.html

，从而允许 React Router 正确处理路由。

预期结果

应用上述解决方案后：

• 直接访问

  /login

  或

  /certificate/1/

  等子路径应该加载相应的页面而不会出现404错误。
• 无论用户是直接访问页面还是在应用程序中导航，应用程序都应该正确处理路由。

结论

按照提供的步骤操作，您应该能够解决在 Vercel 或 AWS CloudFront 上部署的 ReactJS 应用程序中直接访问子路径时收到 404 错误的问题。如果您有更好的解决方案请告诉我们。

继续学习:)