使用 react-router-dom 的 aws s3 404 错误（没有云端）答案

【问题标题】：aws s3 404 error using react-router-dom (without cloudfront)使用 react-router-dom 的 aws s3 404 错误（没有云端）
【发布时间】：2022-06-22 10:37:13
【问题描述】：

我们正在使用 react-router-dom v6。我们使用 aws s3 部署它。此外，当出现错误时，我将其设置为转到 index.html。问题是在React中像“xxx/admin”一样移动时，s3中实际上只有index.html（xxx/admin不存在），导致404的错误，之后出现错误的时候是重定向到 index.html 然后正确调用。

请告诉我如何摆脱这个错误。很难找到，因为这是我的第一个 aws。

我认为在导入 react.js 包之前，先请求 xxx/main 并将错误重定向到 index.html。当重定向到 index.html 时，导入的 js 所以 react 将呈现正确的页面。如果是这样，我该如何解决这个问题.. 对我来说是个难题..
或
我认为它是 SPA，所以只存在一个 index.html 文件，但是当发生错误时，aws s3 调用了不存在的文件。我想知道基本解决方案，而不是使用 cloudFront。（重定向错误 404 -> 200）。请帮助我....如果您能告诉我原因，我将不胜感激。

【问题讨论】：

我不确定是否使用 amazon-S3，但通常您需要配置服务器以重定向到托管和运行应用程序的索引路由，以便它可以正确路由到正确的组件在反应中。

标签： amazon-s3 react-router-dom

【解决方案1】：

免责声明：这是使用 CloudFront 的解决方案。

以防万一。

我在使用 react-router-dom v5 & v6 时遇到了类似的问题。我用BrowserRouter。我不使用 AWS Amplify 将 React 应用程序直接部署到 S3。尽管我重新检查了所有权限设置，但我一直遇到 403 错误而不是 404。

这篇文章最终帮助了我：https://blog.nicera.in/2020/08/hosting-react-app-on-s3-cloudfront-with-react-router-404-fix/。

为 React 应用打开您的 CloudFront 分配。在顶部选项卡中，单击错误页面。
如下添加 403 和 404 的配置。

【讨论】：