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

发布时间：2020-12-15 09:34:00 所属栏目：百科来源：网络整理

导读：我正在使用从 https://github.com/facebookincubator/create-react-app创建的ReactJS SPA 我正在使用S3和Cloudfront来为我的网站服务.一切正常,直到我重新加载页面 – 它会抛出一个错误(在我的情况下拒绝访问),因为没有Hashbang它无法处理. 注意：如果我输入

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

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

注意：如果我输入带有hashbang的URL,它可以正常工作

基本上,这是有效的：https://example.com/#/dashboard(重定向到https://example.com/dashboard)

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

enter image description here

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

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

解决方法

当你请求 https://example.com/dashboard时,第一个请求即 https://example.com发送到服务器,它应该返回包含你的react-router的index.html,它足够聪明地理解路径,即没有hashbangs并加载所需的组件.所以有些重定向必须在服务器端设置路由.

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

enter image description here

希望我的回答很清楚;)

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!