狗屎一样的React（第七节，前端路由这个玩意）

本来这一节是想按着顺序，从前面的react首页结束，开始说React-router这一节的，但我觉得很又必要大概说一下，我们为什么要使用前端路由，关于前端路由我们所能想到的一些知识点。

1、先说说后端路由

说起前端路由，我们肯定会想到后端路由，我们以前经常看见访问一个网址，大概路径是这个样子的，比如：

www.xx.com/index

www.xx.com/index.do

www.xx.com/index.action

www.xx.com/index.jsp

www.xx.com/index.html

等等这些，其实都大概可以看出后端路由的影子，这些平台或者网站，你几乎每添加一个展示页面，都需要后台代码的支撑，或者需要后台架构某些配置项的支撑，否则你添加的页面是无法展示到客户眼前的。

而且既然是后台路由，那么我们展示的每个url路径肯定是受后台控制的，言外之意就是我们本来要访问index.html，但当用户输入www.xx.com/index.html的时候，后台是可以做拦截处理的，后台甚至可以把路径进行重定向，结果给我们展示了list.html；所以只有后台给我们拦截以后再放开这个拦截，前端的页面才得以展示；这样我们就可以得出，几乎每个页面的展示都要受网速的限制，受我们后台架构是否足够优化的限制，我们大多数页面都需要用ajax来获取数据来进行展示，但当我们点击浏览器的回退按钮的时候，经常会出现这样一个bug，前一个页面的ajax数据就不见了，不得不重新获取，而且网页回退，你会发现你的js逻辑会重新走一遍，但如果前一个页面因为我们用js逻辑修改过html内容，html是不会重新渲染的。说得更直白点就是，比如我们有一个div，我们用js给他动态添加了一个自定义属性aname="1" ，当点击回退按钮的时候，aname=“1”还在，html内容不会重新渲染。

2、前端路由又有哪些好处？

刚才我们说了后端路由，其实后端路由有点原始，甚至是好几年前的前后台不分工的情况下很常用的，那个时候天还是蓝的没有什么雾霾，苹果也是用来吃的，人们对页面要求度也是不高的，更多的是关注后台逻辑功能，慢慢的互联网行业起来了，人们发现前台页面是否友好，效果是否绚烂，色觉是否舒服，交互是否顺畅，流程是否简约，加载速度是否够快，都在一定程度上决定着你这个网站在用户心中的分值。

那么前端路由给我们带来什么好处呢？

（1） 有了前端路由，其实更利于我们做前后端分离开发，后端写他们自己的后台逻辑，给我们提供一些跨域的接口，或者是我们本地模拟跨域，后台先给我们准备一些测试数据，这样将更有利于我们前端开发；以前开发前端，总是等待后台给添加数据，这样无形中造成了时间成本；等项目开发完成，前端代码可以部署在独自一台服务器下，也可以再和后台代码进行整合，部署在同一台服务器下；

（2）前端路由就是前端控制跳转，这个页面的展示速度不再受后台控制，甚至比我们刚学html的时候，通过a标签的href跳转更快；

（3）前端路由虽然表现的和后端路由也比较相似，但很多时候通过前端路由我们可以做模块化思路开发，让思路变得更清晰，而且使用了react以后你会慢慢发现，我们甚至可以多个人协同完成同一个页面的内容，因为我们可以每人完成一个小组件；

（4）前端路由形式也很多，现在比较提倡app单页开发，所以前端路由用于单页开发以后，你会发现点击浏览器回退按钮后，之前的ajax获取的数据仍然是存在的，为我们节省了前后台数据交互

其实好处那么多，我更看中第一条，前端可以脱离开后台架构的路由控制

3、前端路由有哪些形式？

前端路由形式也很多，这些都是架构决定的，换言之就是写前端框架的人的思路。我们很多时候总会羡慕别人发家致富，很多时候我们也惊奇的发现别人起家的思路我们也曾有过，所以不管在哪个时代，有思路的人值得我们羡慕，将思路可以很好的运用的人更值得我们崇拜。

（1） 之前用过jquery-mobile的时候，其实整个APP会在一个大htm里来开发，每个小页面在一个小div里进行开发，当前需要展示那个div，就把其他div都隐藏，把当前这个div进行展示。因为大部分数据是需要后台获取的，所以加载页面的时候页面里可能更多的是一些空的dom元素，这样也不会太影响页面的加载速度；当我们点击切换到其他页面的时候再进行数据获取；当我们再切换到其他页面的时候，这个页面的数据已经被缓存，达到了一个很好的单页面APP的效果。

这种思路，首页路径展示为www.xx.com/index.html，列表页（其实也就是列表那个div）路径展示为www.xx.com/index.html#list，其实列表页的那个div的id就是list，对应着的详情页路径展示为www.xx.com/index.html#detail，所以详情页的对应div的id页应该是detail

（2）react-router 同样也是单页面开发的前端路由，只不过时代进步了，他更多的体现出了模块化区分开发的思路。每个页面就不是一个div了，而且采用es6的模块化，每个所谓的页面变成了独立的模块，后续我们会说到react-router使用后，每个页面的展示思路；

（3） 接触过angularjs的小伙伴们会发现，前端路由可以指配html页面，根据angular前端路由来控制哪个路径下应该由哪个html的内容渲染到我们的主页面上；

其实说了那么多，小伙伴们可能觉得很麻烦，我还不如准备好多html,自己来控制a标签的href跳转呢。这就看你的项目更适合哪种情况，你杀死了敌人，不会有首长因为你使用的是菜刀而不是大炮而批评你的，大炮虽然更先进，但需要花时间去学习如何使用，会消耗炮弹，需要运送费用等等，所以我们的开发中，没有最适合，只有更合适。

4、绝对路径的base标签

既然说到前后断分离开发，那么就会有一个绝对路径和相对路径的问题。以前做jsp项目开发的时候，大部分时候使用的绝对路径，后来做分离开发使用的是相对路径，但上线要和后台代码部署到同一个tomcat下，结果我的相对路径就出了问题，很不好改。html中有base这个标签，base标签会有href属性，这个是页面的基准路径。举个栗子，比如我们给页面设定 base href="www.xx.com/"  ，然后页面引入css的时候 link rel="stylesheet" href="style/demo.css"  ，其实最终你的这个demo.css展示的路径就是www.xx.com/style.demo.css了，是不是很好用呢。

相信随着时间和技术的发展，前端路由以后一定会出现更多种形式，而且react-router的各个版本使用姿势都不一样。我们期待着以后的架构将会学习成本越来越低，功能越来越强悍，我们也期待着自己懂得越来越多，但事情往往事与愿违，我们总是需要不断得跟随着先行者们去学习。前端框架不断得出现，先行者们不断得发大招，我们不经意间就被秒杀得体无完肤，但却也是更多得无奈，还是得勇敢得站起来，去学习，去进取以避免被快速得技术发展所淘汰。我还是希望能给更多得小伙伴带来一些易学易懂得东西，喜欢得小伙伴请关注下一节：狗屎一样的React（第八节，React-router 4.0的使用姿势）