當從瀏覽器輸入 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

希望這可以幫助