详解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 相关文章推荐
原生js实现日期联动
Jan 12 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
Vue+Django项目部署详解
May 30 Javascript
javascript实现前端分页功能
Nov 26 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
React中的Context应用场景分析
Jun 11 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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 get_meta_tags()函数
2014/05/12 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
Laravel 队列使用的实现
2019/01/08 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Python中获取对象信息的方法
2015/04/27 Python
python抓取文件夹的所有文件
2018/02/27 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python换行与不换行的输出实例
2020/02/19 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python实现人机五子棋
2020/03/25 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
《燕子》教学反思
2014/02/18 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
体育口号大全
2014/06/18 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
神州牡丹园的导游词
2019/11/20 职场文书