由于React SPA中的Hasbangs，无法访问Refresh上的页面

Question

我正在使用从https://github.com/facebookincubator/create-react-app

创建的ReactJS SPA

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

注意：如果我输入带有hashbang的网址

，它可以正常工作

基本上，这可行：https://example.com/#/dashboard（重定向到https://example.com/dashboard）

但如果我刷新页面，则会出现如下错误：

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

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

Answer 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

Answer 2

除了Shailaja解释的错误页面设置外，还要确保您的CloudFront发行版指向的是网站终结点而不是api终结点。 API端点无法与react-router一起正常工作。

API端点：

  

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

网站端点：

  

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