React Router小结

1. 什么是React Router

一个基于 React 之上的强大路由库，官方的示例库有详细的使用介绍。

2. 为什么要用React Router

如果不使用React Router，组件之间的嵌套，会使URL变得复杂，为了让我们的 URL 解析变得更智能，我们需要编写很多代码来实现指定 URL 应该渲染哪一个嵌套的 UI 组件分支。

而React Router 知道如何为我们搭建嵌套的 UI，因此我们不用手动找出需要渲染哪些组件。

3. 使用方式

React Router.jpg

• 路由嵌套

<Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/repos" component={Repos}/>
      <Route path="/about" component={About}/>
    </Route>
</Router>

App组件要写成下面的样子

export default React.createClass({
  render() {
    return <div>
      {this.props.children}
    </div>
  }
})

• IndexRouter

<Router>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="accounts" component={Accounts}/>
      <Route path="statements" component={Statements}/>
    </Route>
</Router>

进入到根目录，加载Home组件

• Link

<Link to="/home">Home</Link>

• 为Link设置触发状态
  • 设置activeClassName属性，添加一个class，在里面设置属性
  • 设置activeStyle属性，直接定义样式

<Link to="/about" activeClassName="active">About</Link>
<Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link>

• browserHistory and hashHistory
  使用时需要引入

import { browserHistory, hashHistory } from 'react-router'

<Router history={browserHistory}>
     <Route path="accounts" component={Accounts}/>
</Router>

在Accounts组件中使用 browserHistory.push("/") 可跳转到根目录。

<Router history={hashHistory}>
    <Route path="accounts" component={Accounts}/>
</Router>

• 跳转前确认 demo

import React from 'react'
import {Link, Lifecycle} from 'react-router'
export default React.createClass({
    mixins: [Lifecycle],
    routerWillLeave(nextLocation) {
        if (1){
            return '跳转前确认'
        }
    },
    render() {
        return (
            <div>
                <h1>React Router 跳转前确认</h1>
                <ul role="nav">
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/repos">Repos</Link></li>
                </ul>
            </div>
        )
    }
})

参考：
http://www.ruanyifeng.com/blog/2016/05/react_router.html
https://react-guide.github.io/react-router-cn/docs/Introduction.html