初探React-router实现导航

           好久都没有写博客了，一是因为最近工作也比较繁杂，二是在学习路由的时候卡了一下壳，三是工作找不到很是郁闷。经过一段时间的尝试，终于在学习的过程中迈出了一小步，实现了自己当初订的一个小需求。由于还在学习过程中，就只是先拿出一点实际的效果和中间遇到的一些困难。(用react-router实现导航)

github:https://github.com/liuzaijiang/React-Router-Demo （这个是我们自己参考网上的Demo然后自己实现的一个路由导航实例）

参考的Demo:https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes

路由的基础知识：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu（阮一峰的入门博客）

我眼中的路由:

       我目前接触到的路由一般都是用来做导航栏，选项卡之类的功能；我就类比一下用jq的方法去实现这样一个功能的：大体思路就是先把所有的导航和导航对应的显示内容写好，然后全部隐藏，最后根据点击的那个导航，来相应的显示那一块内容（导航和内容一一对应)

       把这个思路用到react 中去也是可以的，相应的内容就是我们的组件，我们可以根据点击某个导航来选择渲染哪一个组件；这

里其实就可以看到react的优势，不显示的内容不存在于DOM节点中，而用传统的方法的话，不显示的内容只是display:none而

已，这样来说当你切换导航的时候就免去了不必要的重绘和重排；

       当然，reacr-router也是解决这个的方法之一，我说一下我个人第一次用完后觉得它好的地方：

******************************************************************************************************************************

      1. 首先它不用去判断渲染哪个组件，它只需要为每个组件定义好一个path属性，为每个导航栏定义好to属性，指向我们需要显

示的组件的path属性，点击相应的导航栏即显示相应组件（其实就是<a>标签的效果，不过react-router是用<Link>这个标签代替

了<a>标签的作用），这样我们不用去为每个导航栏去绑定事件。

      2.然后<Link>本身有一个activeClassName这个属性，这个属性的好处就是为我们当前点击的导航栏增加样式，这个真