详解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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
php与js的区别是什么
Aug 05 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
浅谈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之第五天
2006/10/09 PHP
php Static关键字实用方法
2010/06/04 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
Javascript 实用小技巧
2010/04/07 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
巧用canvas
2017/01/21 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
python绘制雪景图
2019/12/16 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python实现UDP协议下的文件传输
2020/03/20 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
爷爷追悼会答谢词
2014/01/24 职场文书
给校长的建议书600字
2014/05/15 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
学生上课说话检讨书
2014/10/25 职场文书
学生逃课检讨书
2015/02/17 职场文书
运动会开幕式主持词
2015/07/01 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL