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 控制台 (Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify) 中添加重定向规则，但问题仍然存在。有没有办法解决这个问题？

Answer 1

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

React App 是 SPA（Single Page App），它有自己的路由，在 AWS 端，除 base path 之外的所有其他路由都会返回 404，因为它们在服务器端不存在。

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

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