React-Router

首先，React Router 是一个基于react之上的强大的路由库，你可以通过他实现快速的添加视图和数据流，同时保持页面与URL之间的同步。

路由配置是一组指令，用来告诉router如何匹配URL以及匹配之后如何执行代码。

Router 只是一个容器用来存放route的盒子，route只有在router容器中才会起作用

Route 是具体的路由的配置，参数： path，component，path配置的是路由的的匹配规则，这个属性是可以省略的，这样的haunted，不管路径是否匹配，总是会加载制定组件。component配置的是具体记载的是哪一个组件。

IndexRoute 组件用来指定默认情况下加载的子组件。它的参数是：component，用来指定加载的组件。

Redirect 组件用于路由的跳转，即用户访问一个路由，会自动跳转到另外一个路由。参数：from to  from 是当前的路由的路径，to是要跳转的路由的路径

{/* 从 /inbox/messages/:id跳转到 /messages/:id*/} 

<Route path='inbox' component={Inbox}>

        ＜Redirect    from="messages/:id"   to="/messages/:id"/>

</Route>

上面的例子中，当访问/inbox/messages/5，会自动跳转到/messages/5（也就是由原来的相对路径跳转到了绝对路径）。

IndexRedirect 组件用于访问根路由的时候将用户重定向到某个子组件。参数：to 用于指定默认进入的路由

<Route   path="/"    component={App}>

              ＜IndexRedirect        to="/welcome"/> 

              <Route    path="welcome"       component={Welcome}   />

               <Route    path="welcome"      component={Welcome}  />

< /Route>

上面的例子中，当用户访问跟路由的时候，会自动重定向到子组件 welcome 组件上。

Link 组件用于取代<a>元素（实际他就是a链接，在网页上查看元素的话显示的就是a标签），生成一个链接，允许用户点击后跳转到另一个路由，它的参数是：to ，activeStyle，activeClassName，onlyActiveOnIndex。 to用于指定跳转的路由，activeStyle点击之后的样式，activeClassName配置的是点击之后要添加的class，onlyActiveOnIndex它的作用和下面的IndexLink的作用类似，具体事例见IndexLink下的代码。

IndexLink 用于链接到根路由。因为对于跟路由来说，activeStyle和activeClassName会失效（实际是总是生效），因为 /  会匹配任何自路由，二IndexLink组件会使用路径的精确匹配。 参数：to ， activeClassName作用和上面的Link的参数作用类似。

  <Link to="/" activeClassName="active" onlyActiveOnIndex={true}>

       Home

</Link>

路由的钩子：每个路由都有Enter和Leave钩子，用户进入或离开该路由的时候会触发。可以通过定义 onEnter，和 routerWillLeave 方法来实现一些功能。