详解react-router 4.0 下服务器如何配合BrowserRouter


Posted in Javascript onDecember 29, 2017

react-router作为react框架路由解决方案在react项目中举足轻重。

在react-router 4.0版本中,API与先前版本相比有了很大的修改,在2.0、3.0中常用的<Router>组件作为路由底层配置组件不再常用,取而代之的是四个各有不同的路由组件:

<BrowserRouter>, <HashRouter>, <MemoryRouter>, <StaticRouter>

其中<MemoryRouter>组件在内存中保存“URL”信息,不会修改浏览器的地址栏,往往用于React Native或测试环境等非浏览器环境。

而<StaticRouter>组件从名字能看出它从不修改路由,这在服务器端渲染时很有用。

<HashRouter>组件我们最为熟悉的路由组件不用再多赘述,这里来说说我在使用react-router推荐的<BrowserRouter>时遇到的坑。

<BrowserRouter>

<BrowserRouter>和<HashRouter>都可以实现前端路由的功能,区别是前者基于rul的pathname段,后者基于hash段。

前者:http://127.0.0.1:3000/article/num1

后者:http://127.0.0.1:3000/#/article/num1(不一定是这样,但#是少不了的)

这样的区别带来的直接问题就是当处于二级或多级路由状态时,刷新页面,<BrowserRouter>会将当前路由发送到服务器(因为是pathname),而<HashRouter>不会(因为是hash段)。

我们当然不希望前端路由被发送到后台。

在react-router 4.0 的文档中有这样一段话:

注意: 使用 hash 的方式记录导航历史不支持 location.key 和 location.state。 在以前的版本中,我们为这种行为提供了 shim,但是仍有一些问题我们无法解决。 任何依赖此行为的代码或插件都将无法正常使用。 由于该技术仅用于支持传统的浏览器,因此在用于浏览器时可以使用 <BrowserHistory> 代替。

这就要求服务器要配合前端做一些简单的修改。

修改的思想就是当收到请求的url不是功能性的,而是前端路由时,重新加载入口html文件(我的后台是nodejs)。

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  //判断是主动导向404页面,还是传来的前端路由。
 //如果是前端路由则如下处理

  fs.readFile(__dirname + '/public/dist/index.html', function(err, data){
    if(err){
      console.log(err);
      res.send('后台错误');
    } else {
      res.writeHead(200, {
        'Content-type': 'text/html',
        'Connection':'keep-alive'
      });
      res.end(data);
    }
  })
});

此处踩坑无数,在网上搜索方法后换用nginx,使用try_files字段定向到入口html,但是重定向后,webpack打包的js文件没有执行。

在查看firebug时发现此次刷新的响应头中设置了"Connection":"keep-alive";

觉得问题应该出在这里,换用nodejs用200状态配合keep-alive果然解决了问题。

在react-router 4.0 多级路由下刷新页面不会再404,而是保存了前端状态。

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

Javascript 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
移动节点的jquery代码
Jan 13 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 #Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 #Javascript
深入浅析vue组件间事件传递
Dec 29 #Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 #Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 #Javascript
node简单实现一个更改头像功能的示例
Dec 29 #Javascript
JavaScript 中使用 Generator的方法
Dec 29 #Javascript
You might like
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
js实现日期级联效果
2014/01/23 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python 获取项目根路径的代码
2019/09/27 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
一套带网友答案的.NET笔试题
2016/12/06 面试题
销售工作岗位职责
2013/12/24 职场文书
大学专科自荐信
2014/06/17 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
邀请函怎么写
2015/01/30 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL