AWS托管的(s3，cloudfront)静态react网站在从浏览器输入url时不会路由到子页面

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

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

当您从浏览器进入主页并选择其中一个子页面的按钮时，它将成功重定向到子页面。

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

我确实检查了开发人员工具，当你点击"；关于"；按钮请求标题类似于此

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

但是，当您直接在浏览器中输入url时，即(www.example.com/about(，请求标头如下

:path: /about

以及"；referer"；不在那里。

我是不是遗漏了什么？当您在浏览器中输入子页面的url时，有没有一种方法可以重定向到静态js页面？

提前谢谢。

您需要设置Cloudfront，这样当用户直接导航到页面时，Cloudfront不会因为找不到该页面的文件而发回错误(这是您得到的XML错误(，而是将该请求传递到/，以便React可以接管。

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

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

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

react路由器没有'；不能在aws s3 bucket 中工作

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

希望这能帮助

相关内容