详解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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
理解javascript中的闭包
Jan 11 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
YII中assets的使用示例
2014/07/31 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
在python中pandas的series合并方法
2018/11/12 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
软件工程师面试题
2012/06/25 面试题
国家助学金获奖感言
2014/01/31 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
工程部主管岗位职责
2015/02/12 职场文书
离职告别感言
2015/08/04 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL