React Router and Lifecycle

源码查看

使用终端

• git clone [email protected]:boloog/react-router.git
• npm i
• npm run build
• npm 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 （ 路由重定向 ）

相关代码