React Router小结

1. 什么是React Router

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

2. 为什么要用React Router

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

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

3. 使用方式

React Router.jpg

• 路由嵌套

App组件要写成下面的样子

export default React.createClass({
  render() {
    return 

      {this.props.children}
    
  }
})

• IndexRouter

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

• Link

Home

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

About
Repos

• browserHistory and hashHistory
  使用时需要引入

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

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

• 跳转前确认 demo

import React from 'react'
import {Link, Lifecycle} from 'react-router'
export default React.createClass({
    mixins: [Lifecycle],
    routerWillLeave(nextLocation) {
        if (1){
            return '跳转前确认'
        }
    },
    render() {
        return (
            

                
React Router 跳转前确认
                

                    
About
                    
Repos
                
            
        )
    }
})

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