AWS Amplify ReactJS 应用程序重新加载页面时遇到问题

Question

我目前正在开发一个主要使用 ReactJS 和 AWS Amplify 的全栈项目。我已成功部署该网站，但 URL 路由似乎仅在我从主页重定向时才起作用。我只能加载主页 www.website.com 但我尝试手动输入 www.website.com/login/，它给了我这条消息

<Error>
  <Code>AccessDenied</Code>

  <Message>Access Denied</Message>

  <RequestId>B2173BDEE0658858</RequestId>

  <HostId>
  TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
  </HostId>
</Error>

我从其他 StackOverflow 页面查找了解决方案，但似乎没有解决问题。

我尝试在提供的 AWS 控制台中添加重定向规则（在 AWS Amplify 上部署 React Web 应用程序时出现 403 ACCESS DENIED 错误），但问题仍然存在。有办法解决这个问题吗？

Answer 1

您必须在 AWS Amplify 上设置 404（未找到页面）重定向以指向 index.html。

React App 是 SPA（单页应用程序），它有自己的路由，在 AWS 端，除了基本路径之外的所有其他路由都将返回 404，因为它们在服务器端不存在。

一旦你再次设置 404 指向你的 React 应用程序，React 路由器将处理路由。

检查：docs.aws.amazon.com/amplify/latest/userguide/redirects.html 并注意 404 重定向。

Answer 2

如果您在 2024 年仍然遇到 Amplify 的此问题，这是对我有用的唯一解决方案：

1. 在 Amplify 控制台 > 托管 > 重写和重定向中
2. 添加此规则

原地址

目的地地址 /index.html

重定向类型 200