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

Question

我正在使用从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>

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在手动刷新或写入时不起作用