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

 更新时间:2017年12月29日 10:33:19   作者:YZH_chengdu  
这篇文章主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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,而是保存了前端状态。

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

相关文章

  • 浅谈React 服务器端渲染的使用

    浅谈React 服务器端渲染的使用

    本篇文章主要介绍了浅谈React 服务器端渲染的使用,React是最受欢迎的客户端 JavaScript 框架,在本教程中,我们将逐步向您介绍服务器端的渲染示例
    2018-05-05
  • React实现评论的添加和删除

    React实现评论的添加和删除

    这篇文章主要为大家详细介绍了React实现评论的添加和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • React中useRef的具体使用

    React中useRef的具体使用

    这篇文章主要介绍了React中useRef的具体使用,它可以用来获取组件实例对象或者是DOM对象,除此之外还有哪些用法,就一起来了解一下
    2021-04-04
  • 详解基于React.js和Node.js的SSR实现方案

    详解基于React.js和Node.js的SSR实现方案

    这篇文章主要介绍了详解基于React.js和Node.js的SSR实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • React三大属性之props的使用详解

    React三大属性之props的使用详解

    这篇文章主要介绍了React三大属性之props的使用详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • 从头写React-like框架的工程搭建实现

    从头写React-like框架的工程搭建实现

    这篇文章主要介绍了从头写React-like框架的工程搭建实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React实现全局组件的Toast轻提示效果

    React实现全局组件的Toast轻提示效果

    这篇文章主要介绍了React实现全局组件的Toast轻提示效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • ReactNative中使用Redux架构总结

    ReactNative中使用Redux架构总结

    本篇文章主要介绍了ReactNative中使用Redux架构总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React Native自定义路由管理的深入理解

    React Native自定义路由管理的深入理解

    路由管理的功能主要指的页面跳转、goBack、带参数跳转等功能,这篇文章主要给大家介绍了关于React Native自定义路由管理的相关资料,需要的朋友可以参考下
    2021-08-08
  • React学习笔记之条件渲染(一)

    React学习笔记之条件渲染(一)

    条件渲染在React里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07

最新评论