当从浏览器输入 url 时，AWS 托管（s3，cloudfront）static 反应网站不会路由到子页面

Question

我在aws上托管了一个 static react 网站并使用s3 ， cloudfront 。 它有几个子页面。

<Link to='/about'>about us</Link>
<Link to='/projects'>projects</Link>
<Link to='/stats'>statistics</Link>
<Link to='/contact'>contact</Link>

当您从浏览器和 select 这些子页面的按钮之一进入主页时，它将成功重定向到子页面。

但是当您在浏览器中直接输入 url ( www.example.com/about ) 时，它不会重定向到子页面并给出此错误，即“此 XML 文件似乎没有任何与之关联的样式信息。显示了文档树以下。”

我确实检查了开发人员工具，发现当您单击“关于”按钮时，请求 header 是这样的

:path: /static/js/6.gc48fd92.chunk.js
referer: https://www.example.com/about

但是当您直接在浏览器中输入 url 即（ www.example.com/about ）时，请求 header 是这样的

:path: /about

并且“推荐人”不存在。

我在这里错过了什么吗？ 当您在浏览器中输入子页面的 url 时，有没有办法重定向到 static js 页面？

提前致谢。

Answer 1

您需要设置 Cloudfront，以便当用户直接导航到该页面时，CloudFront 不会发回错误，因为它找不到该页面的文件（这是您得到的 XML 错误），而是通过请求到/所以 React 可以接管。

https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff#spad

这样做的要点是您告诉 CloudFront 在任何 404 错误时，重定向到根页面并向用户返回 200。

Answer 2

我已经通过这样做修复了它。

反应路由器在 aws s3 存储桶中不起作用

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/functions-tutorial.html

希望这可以帮助