react-router应用

react-router

import {Link，Route , Router , IndexRoute , hashHistory, Redirect} from 'react-router';
//Link可以理解为a标签
//暂时未用到Redirect，onEnter 钩子 。Redirect 是一个重定向组件，有 from 和 to 两个属性；onEnter 钩子中用于判断某种情况是否成立，进一步操作某步动作
import React {Component} from 'react';

class Main extends Component{
    render(){
        <div>{this.props.children}</div>
        //Main组件的this.props.children属性就是子组件
    }
}

const route = {
    <Router history={hashHistory}>
        <Route path='/' component={Main}>
        //根路由是'/',参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化,即根路径为xxxxxx.com/#/
            <IndexRoute component={Index}/>
            //Index是根路由的子组件，即指定默认情况下加载的子组件
            <Route path="Menu" component={Menu}/>
            //Route 的 path 属性表示路由组件所对应的路径，可以是绝对或相对路径，相对路径可继承；
            <Route path="About" component={About} />
            <Route path="Article/:id" component={ArticleId} />
            //:id匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.id取出。
            //URL的查询字符串/?classid=234，可以用this.props.location.query.classid获取
        </Route>
    </Router>
}


在Router组件之外，导航到路由页面，可以使用浏览器的History API
例如 
export class Main extends Component {
constructor(props) {
        super(props);
        this.submit = () => {
            // ...
            hashHistory.push("/")
            //跳转到'/'路径
        }

    }
    render() {    
        return (        
            <div>
                <Link onClick={this.context.router.goBack}>
                    <i>单击返回上一个has路径</i>
                </Link>
                <div onClick={this.submit}></div>
            </div>
        )
    }
}

Main.contextTypes = {
    router: React.PropTypes.object.isRequired
}