2017-05-02

react-route

react-router

前言：本文只讲react中router的使用方法。

引包

要想使用路由必须先把router的包引进来

1	import {Router, Route, IndexRoute, hashHistory,IndexLink, Link, Redirect, IndexRedirect} from 'react-router';

下面附一段代码具体讲解一下：
图1

<Router history={hashHistory}>
               <Route path="/" component={App}>
                   <IndexRoute component={Setting} />
                   <Route path="setting" component={MyappIndex}>
                       <IndexRedirect to="/frist"/>
                       <Route path="/frist" component={Frist}/>
                       <Route path="/two" component={Frist}/>
                       <Route path="/three" component={Frist}/>
                       <Route path="/four" component={Frist} onLeave={this.onleave.bind(this)}/>
                   </Route>
                   <Route path="navlist" component={Navlist}/>
                   <Route path="message" component={Message}/>
                   <Route path="aboutus" component={Aboutus}/>
               </Route>
           </Router>

首先Router,定义路由的标签，所有的路由必须写在这对标签内部。他有一个属性history，他的值是hashHistory，这是由于react-router的实现原理和angular的router是一样的，都是利用的hash值！就这么个用法，不多说了。
IndexRoute，默认路由，如果没有默认路由的话，子组件是undefined，也就不会渲染出任何东西，只有孤零零的导航在哪，没有内容，点击了就会有的，这里说的是第一次进入，不包含手动点击。
Route,路由具体的配置了，包含path，路由路径和component加载模块。加载模块即对应路由路径下要展示的内容。
IndexRedirect，IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。由于IndexLink在根路由的时候，嵌套的路由要默认展示的页面再用IndexLink就会不生效或持续生效，所以用他把默认路由转成你想要的效果。他存在的意义是弥补indexRoute的不足。因为如果是嵌套层次的路由，还用indexroute的话，会造成嵌套的路由默认选中状态不会生效，即使你配合indexLink使用也是一样。这个其实很简单，当你使用几次就会彻底明白，这里不说了，越说越迷糊。
这里还有一个很好玩的东西，即onEnter和onLeave，他们的作用也不小，可以监听是否进入或离开该路由。最常用的，当用户离开这个页面的时候，可以调onLeave这个方法，去处理一些逻辑，比如弹出一个盒子，询问用户是否要保存。

图2：

<div className="nav">
      <ul className="frist-nav">
                <li><IndexLink activeClassName="active" to="/">首页</IndexLink></li>
                <li><Link activeClassName="active" to="/setting">页面设置</Link></li>
                <li><Link activeClassName="active" to="/navlist">导航列表</Link></li>
                <li><Link activeClassName="active" to="/message">消息管理</Link></li>
                <li><Link activeClassName="active" to="/aboutus">关于我们</Link></li>
      </ul>
            {this.props.children}
 </div>

上面是第一层路由配置的导航，这里值得一提的是，Link标签取代了a标签
IndexLink前面说了一下，他的作用是页面打开后，是要显示内容的，同时也要表明现在是处于哪个路由中，一般是指默认的路由，to属性是路由路径，和之前的a标签比，不用写#了。
activeClassName是给激活的路由添加类名的，哪个路由被激活，哪个就添加指定的类名，不激活的不添加，这样就很方便我们去处理了。
路由只有左边（或上边，一般都这样干，也不排除路由在右边、下边）的导航不行，还要有对应的页面内容，react为了模块化，他可不允许你都写在一个文件里。那怎么办呢？{this.props.children}，这是一个占位符，表示所有的内容区最后都要加载到这个地方来。至于最后谁会加载到这里来，结合图1图2，我来说下具体过程
```
1. 当点了某个路由，就激活了该路由，那么给他加上指定类名
2. 根据to属性的值去匹配路径，匹配成功，加载component指定的组件，放到{this.props.children}站位的地方。
3. 以上就是一个路由跳转的过程。
```

图3;

<div className="left">
     <ul>
         <li><Link activeClassName="actives" to="/frist">第一导航</Link></li>
         <li><Link activeClassName="actives" to="/two">第二导航</Link></li>
         <li><Link activeClassName="actives" to="/three">第三导航</Link></li>
         <li><Link activeClassName="actives" to="/four">第四导航</Link></li>
     </ul>
     <div className="right">
         {this.props.children}
     </div>
 </div>

这是嵌套的第二层路由，写法大体和第一层路由相同，但是，这里再用IndexLink就无效了。原因前面说了。
回到图1，再看IndexRedirect，就知道为什么用他了。因为没有了IndexLink，也就是没有指明导航现在处于哪里的指示。所以重定向一下。当然，还有Redirect，这个就是重定向别的路由了。用法和indexredirect一样。