由于 React SPA 中的 Hasbangs，无法访问刷新页面答案

【问题标题】：Cannot access page on Refresh due to Hasbangs in a React SPA由于 React SPA 中的 Hasbangs，无法访问刷新页面
【发布时间】：2017-07-02 11:05:07
【问题描述】：

我正在使用从 https://github.com/facebookincubator/create-react-app 创建的 ReactJS SPA

我正在使用 S3 和 Cloudfront 为我的网站提供服务。在我重新加载页面之前一切正常 - 它会引发错误（在我的情况下访问被拒绝），因为它无法在没有 Hashbang 的情况下处理。

注意：如果我输入带有 hashbang 的 URL 就可以了

所以本质上，这行得通：https://example.com/#/dashboard（重定向到https://example.com/dashboard）

但是如果我刷新页面，它会给出如下错误：

我们使用 browserHistory 来维护路线。我只显示相关代码：

<Router history={browserHistory}>
<Route path='/dashboard' component={Dashboardpage} />
</Router>

【问题讨论】：

标签： reactjs amazon-s3 amazon-cloudfront hashbang create-react-app

【解决方案1】：

当您请求 https://example.com/dashboard 时，第一个请求（即 https://example.com）会发送到服务器，它应该返回包含您的 react-router 的 index.html，它 足够智能 可以理解路径即没有hashbangs并加载所需的组件。因此必须在服务器端设置一些重定向路由。

在您点击https://example.com/dashboard 的情况下，S3 和 cloudfront 应该处理错误代码（即 404 或任何）并将页面重定向到 index.html，之后 react-router 将处理要加载的组件。

希望我的回答很清楚 ;)

也可以参考这里给出的答案React-router urls don't work when refreshing or writting manually

【讨论】：

您能否编辑您的答案以附上 CloudFront 配置的屏幕截图？
这是否意味着我的 API 在 ajaxily 调用时不能返回 403 禁止？
这取决于您希望如何处理各种 HTTP 错误代码。您可以列出如上图所示。 @达西
太棒了，你拯救了我的一天。我花了一整天的时间才弄清楚出了什么问题。谢谢你。 @Shailajashah
我试过这个解决方案，但它总是重定向到主页，而不是正确的页面......也许我需要一些额外的东西，因为我正在使用 Gatsby？

【解决方案2】：

除了 Shailaja 解释的错误页面设置之外，请确保您的 CloudFront 分配指向网站端点而不是 api 端点。 API Endpoints 无法与 react-router 一起正常工作。

API 端点：

bucket-name.s3-website-region.amazonaws.com

网站端点：

bucket-name.s3-website.region.amazonaws.com

【讨论】：