BrowserRouter如何配合react-router服务器

这篇文章主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter，现在分享给大家，也给大家做个参考。

react-router作为react框架路由解决方案在react项目中举足轻重。

在react-router 4.0版本中，API与先前版本相比有了很大的修改，在2.0、3.0中常用的a7f2cf15f06fbef780c6b2609731da81组件作为路由底层配置组件不再常用，取而代之的是四个各有不同的路由组件：

6177ae8eed0322e277a7e6c21878d6d7, 4915f05e1fd45774514682b289f54a27, ab736354b76d127562077b87d19fcb68, 918422798e26d25f6fed3e9f4a3226eb

其中ab736354b76d127562077b87d19fcb68组件在内存中保存“URL”信息，不会修改浏览器的地址栏，往往用于React Native或测试环境等非浏览器环境。

而918422798e26d25f6fed3e9f4a3226eb组件从名字能看出它从不修改路由，这在服务器端渲染时很有用。

4915f05e1fd45774514682b289f54a27组件我们最为熟悉的路由组件不用再多赘述，这里来说说我在使用react-router推荐的6177ae8eed0322e277a7e6c21878d6d7时遇到的坑。

6177ae8eed0322e277a7e6c21878d6d7

6177ae8eed0322e277a7e6c21878d6d7和4915f05e1fd45774514682b289f54a27都可以实现前端路由的功能，区别是前者基于rul的pathname段，后者基于hash段。

前者：http://127.0.0.1:3000/article/num1

后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）

这样的区别带来的直接问题就是当处于二级或多级路由状态时，刷新页面，6177ae8eed0322e277a7e6c21878d6d7会将当前路由发送到服务器（因为是pathname），而4915f05e1fd45774514682b289f54a27不会（因为是hash段）。

我们当然不希望前端路由被发送到后台。

在react-router 4.0 的文档中有这样一段话：

注意： 使用 hash 的方式记录导航历史不支持 location.key 和 location.state。 在以前的版本中，我们为这种行为提供了 shim，但是仍有一些问题我们无法解决。 任何依赖此行为的代码或插件都将无法正常使用。 由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用 e39972b58835f779f5cb270543abb76e 代替。

这就要求服务器要配合前端做一些简单的修改。

修改的思想就是当收到请求的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 Native有关跨域资源出错问题

在nodejs中安装最新版npm（详细教程）

在js中如何实现函数去抖（详细教程）

在vue-scroller中如何标记记录滚动位置

微信小程序审核没通过该怎么解决？

使用swiper如何改变滑动内容（详细教程）

使用Vue.js 2.0如何实现背景视频登录页面

以上是BrowserRouter如何配合react-router服务器的详细内容。更多信息请关注PHP中文网其他相关文章！