详解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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 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 Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
python读取各种文件数据方法解析
2018/12/29 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
centos7之Python3.74安装教程
2019/08/15 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
如何获取Python简单for循环索引
2019/11/21 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
班级旅游计划书
2014/05/03 职场文书
财务总监岗位职责
2015/02/03 职场文书
写给女朋友的保证书
2015/05/09 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
redis缓存存储Session原理机制
2021/11/20 Redis
Python使用永中文档转换服务
2022/05/06 Python