使用终端
git clone git@github.com:boloog/react-router.gitnpm inpm run buildnpm start
url地址
-
http://localhost:3000/#/( Home ) -
http://localhost:3000/#/article?orderBy=date（ Article ） -
http://localhost:3000/#/shows/1（ Show ）
组件的生命周期
-
componentDidMount（ 组件挂载 ） -
componentWillMount（ 运行 render() ） -
componentWillReceiveProps（ 读取 props ） -
shouldComponentUpdate（ return true; 是否更新组件 ） -
componentWillUpdate（ 更新组件 ） -
componentDidUpdate（ 更新组件完毕 ） -
componentWillUnmount（ 切换路由时组件将卸载 ）
路由
import { Router, Route, hashHistory, Link, IndexRoute, Redirect } from 'react-router'
-
Router（ 一个容器 ） -
Route（ 定义路由 ） -
hashHistory（ 路由的切换由URL的hash变化决定 ） -
Link（ 生成一个链接，允许用户点击后跳转到另一个路由 ） -
IndexRoute（ 索引下对应显示内容 ） -
Redirect（ 路由重定向 ）
相关代码
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="article" component={Article}>
<IndexRoute component={ShowIndex} />
<Route path="/shows/:id" component={Show}
onEnter={handleEnter}
onLeave={handleLeave}
/>
<Redirect from="shows/:id" to="/shows/:id"/>
</Route>
</Route>
</Router>
