一 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上特别有用。