react-router browserHistory刷新页面404问题解决方法


Posted in Javascript onDecember 29, 2017

使用React开发新项目时,遇见了刷新页面,直接访问二级或三级路由时,访问失败,出现404或资源加载异常的情况,本篇针对此问题进行分析并总结解决方案。

背景

使用webpack-dev-server做本地开发服务器时,正常情况只需要简单使用webpack-dev-server指令启动即可,但是当项目处于以下两种情况时,往往需要有嵌套路由和异步加载路由:

  1. 我们使用react-router这种路由库构建单页面应用路由;
  2. 使用html-webpack-plugin插件动态将加载js的<script>标签注入html文档;

这时,访问localhost:9090是可以正常加载页面和js等文件的,但是当我们需要访问二级甚至三级路由或者刷新页面时,如localhost:9090/posts/92时,可能会出现两种情况:

  1. 页面加载失败,返回Cannot Get(404);
  2. 服务响应,但是没有返回webpack处理输出的html文件,导致无法加载js资源,第二种情况如图:

react-router browserHistory刷新页面404问题解决方法

那么我们怎么处理才能正常访问,各页面路由呢?博主追踪溯源,查找文档配置后解决了问题,本篇就是对整个解决问题过程的总结。

分析问题

发现问题后,我们就要开始分析,解决问题了,我们判断这个问题一般是两方面原因造成:

  1. react-router路前端由配置;
  2. webpack-dev-server服务配置;

react-router

因为前端路由更容易确定问题,更方便分析,而且对于react-router更熟悉,所以首先去查询react-router路由库相关配置信息,发现文档中提到了使用browserHistory时,会创建真实的URL,处理初始/请求没有问题,但是对于跳转路由后,刷新页面或者直接访问该URL时,会发现无法正确相应,更多信息查看参考文档,文档中也提供了几种服务器配置解决方式:

Node

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
 response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

在使用Node作为服务时,需要使用通配符*监听所有请求,返回目标html文档(引用js资源的html)。

Nginx

如果使用的是nginx服务器,则只需要使用try_files 指令:

server {
 ...
 location / {
  try_files $uri /index.html
 }
}

Apache

如果使用Apache服务器,则需要在项目根目录创建.htaccess文件,文件包含如下内容:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

以下都是针对服务器的配置,可惜的是我们目前还没引入相关服务器,只是使用了webpack-dev-server的内置服务,但是我们已经找到问题所在了,就是路由请求无法匹配返回html文档,所以接下来就该去webpack-dev-server文档中查找解决方式了。

webpack-dev-server

在这里不得不吐槽一下webpack-dev-server官方文档,博主反复看了几遍,才看清楚了问题所在,这里也分两种情况:

  1. 没有修改output.publicPath,即webpack配置文件中没有声明值,属于默认情况;
  2. 设置了output.publicPath为自定义值;

点此查看文档

默认情况

默认情况下,没有修改output.publicPath值,只需要设置webpack-dev-server的historyApiFallback配置:

devServer: {
 historyApiFallback: true
}

If you are using the HTML5 history API you probably need to serve your index.html in place of 404 responses, which can be done by setting historyApiFallback: true

如果你的应用使用HTML5 history API,你可能需要使用index.html响应404或者问题请求,只需要设置g historyApiFallback: true即可

自定义值

However, if you have modified output.publicPath in your Webpack configuration, you need to specify the URL to redirect to. This is done using the historyApiFallback.index option

如果你在webpack配置文件中修改了 output.publicPath 值,那么你就需要声明请求重定向,配置historyApiFallback.index 值。

// output.publicPath: '/assets/'
historyApiFallback: {
 index: '/assets/'
}

Proxy

发现使用以上方式,并不能完全解决我的问题,总会有路由请求响应异常,于是博主继续查找更好的解决方案:

点此查看文档

The proxy can be optionally bypassed based on the return from a function. The function can inspect the HTTP request, response, and any given proxy options. It must return either false or a URL path that will be served instead of continuing to proxy the request.

代理提供通过函数返回值响应请求方式,针对不同请求进行不同处理,函数参数接收HTTP请求和响应体,以及代理配置对象,这个函数必须返回false或URL路径,以表明如何继续处理请求,返回URL时,源请求将被代理到该URL路径请求。

proxy: {
 '/': {
  target: 'https://api.example.com',
  secure: false,
  bypass: function(req, res, proxyOptions) {
   if (req.headers.accept.indexOf('html') !== -1) {
    console.log('Skipping proxy for browser request.');
    return '/index.html';
   }
  }
 }
}

如上配置,可以监听https://api.example.com域下的/开头的请求(等效于所有请求),然后判断请求头中accept字段是否包含html,若包含,则代理请求至/index.html,随后将返回index.html文档至浏览器。

解决问题

综合以上方案,因为在webpack配置中修改了output.publicPath为/assets/,所以博主采用webpack-dev-server Proxy代理方式解决了问题:

const PUBLICPATH = '/assets/'
...
proxy: {
 '/': {
  bypass: function (req, res, proxyOptions) {
   console.log('Skipping proxy for browser request.')
   return `${PUBLICPATH}/index.html`
  }
 }
}

监听所有前端路由,然后直接返回${PUBLICPATH}/index.html,PUBLICPATH就是设置的output.publicPath值。

另外,博主总是习惯性的声明,虽然不设置该属性也能满足预期访问效果:

historyApiFallback: true

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断及设置浏览器全屏模式
Apr 20 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
canvas实现弧形可拖动进度条效果
May 11 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
node简单实现一个更改头像功能的示例
Dec 29 #Javascript
JavaScript 中使用 Generator的方法
Dec 29 #Javascript
js中url对象化管理分析
Dec 29 #Javascript
JS计算距当前时间的时间差实例
Dec 29 #Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 #Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 #Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 #Javascript
You might like
mysql5详细安装教程
2007/01/15 PHP
php split汉字
2009/06/05 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
js打造数组转json函数
2015/01/14 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
决策树的python实现方法
2014/11/18 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python处理csv中的空值方法
2018/06/22 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python+requests接口自动化框架的实现
2020/08/31 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
艺术学院毕业生自我评价
2014/03/02 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
单位接收证明格式
2015/06/18 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
《火烧云》教学反思
2016/02/23 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫