React Router and Lifecycle

源码查看

使用终端

• git clone git@github.com: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 （ 路由重定向 ）

相关代码

<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>