React全家桶之react-router（二）

        如果你用过angularJs，你一定知道有路由这个东西，浏览器根据路由上“#”号后面的标记区分不同的逻辑页面，并将不同的页面绑定到对应的控制器上， angularJs和react都是适合单页应用的前端框架，路由系统大同小异。

       在 web 应用开发中，路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。主流的前端框架也都有自己的路由，比如 Backbone、Ember、Angular、React 等等。那 react-router 相对于其他路由系统又针对 React 做了哪些优化呢？它是如何利用了 React 的 UI 状态机特性呢？又是如何将 JSX 这种声明式的特性用在路由中？

    

      有篇文章深刻解析了路由，看这里：https://segmentfault.com/a/1190000004075348?utm_source=tuicool&utm_medium=referral。

      你可能一开始没看懂，没关系。大概先了解它的用法和用处就行了，具体还是要在代码中慢慢掌握。我一直认为学习前端任何一门技术都需要循序渐进，特别是当你看了很多概念一头雾水的时候，先别打退堂鼓。老兄，去敲一些代码吧。当你敲完代码并在页面上看到效果时，你再回过头来可能对那些概念更加了解。

     github上的react-router主页：https://facebook.github.io/react

     某人整理的react-router-tutoria： https://github.com/reactjs/react-router-tutorial

     另外还有阮一峰的react-router实例分析：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu 

     

      注1：我觉得react-router-tutorial这里的实例会更加简单一点，清晰一点，每个例子一个特性，都敲一遍后就应该差不多理解了

      注2： github上的react-router的例子在里面的examples文件夹下，还有那个huge-apps是个根据路由按需加载的例子，我觉得很有用

        

      注3：这些项目中有用到node，webpack这些工具，这个我将在后面的文章中提到，现在只要会用就行了。

      好了，当你把一些例子都敲完的时候，你应该已经把react-router理解的差不多了，其实它很简单么，不就是通过管理 URL，实现组件的切换和状态的变化么！但是你一定会发现了很多没见过的东西，比如：

   1， 这个文件是什么东东？干嘛用的？

      

     2，这些又是什么写法？（黑人问号）

      

      这些后面会讲到的，所以说学react最有挑战性的是，当你准备学一门新技术的时候，它中间又包含着另一门技术，除非你不想搞懂它，否则你必须又要去学它，因为围绕着react的是一套生态体系，你要学会用它家族中的每个成员，才能发挥出react最大的威力！