React学习(六)：路由

一 React Router

1.优势

通过将组件和路由关联起来，它能使UI和URL保持同步；它的另一个优势是，它提供了一种机制让你可以控制应用程序的流程。

2.组件

React Router提供了如下的3个组件：

Router和Route：采用声明方式将路由映射到你的应用程序的UI层级。

Link：一种在项目中导航的办法，用来替代原生中的a标签，使用如下<Link to="/about">About</Link>；他有一个较为优秀的功能，它能接受一个名为activeClassName的属性，Link组件会自动把这个css类应用到活动链接上。举例如下：

<Link to="/about" activeClassName="active">About</Link>；

3.使用

使用时以Link作为跳转链接，在文件代码的底部将Router组件渲染到DOM上。如下：

render((
<Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Router>
),document.getElementById('root'));

4.Index 路由

可以使用<IndexRoute>配置Index路由，设置默认路径。

5.带参数的路由

当在一个路由中声明动态数据时，React Router会将URL那部分所包含的数据都注入到组件props里面的一个参数属性中。

6.传递props

传递props有两种办法：一是通过在route里面加上你想要传递的参数，子组件可通过this.props.route.title的方式获取到；二可通过在子组件上克隆并注入props，克隆children并注入新的属性，这个途径在动态props上特别有用。