React-Router V4

1. 安装
   npm install react-router-dom --save
2. 引用
   import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
3. 路由

render((
    <Router >
        <div>
            <Route exact path='/' component={Index}/>
            <Route path='/Course' component={Course}/>
            <Route path='/User' component={User}/>
        </div>
    </Router >
), document.getElementById('root'));

*注意，<Router >下一级仅能包含一个元素，所以需要用div括一下

4. 导航

const MenuLink = ({ label, to, activeOnlyWhenExact }) => (
  <Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
    <div>
      <Link to={to}>{label}</Link>
    </div>
  )}/>
)
render() {
        return (
          <footer>
            <MenuLink to='/' label='首页' />
                <MenuLink to='/Course' label='课程'/>
                <MenuLink to='/User' label='我的'/>
          </footer>
        );
    }

5. Push

App.contextTypes = {  
     router:React.PropTypes.object  
}  
class App extends Component {
    linkTo(){
        const { history } = this.context.router
        history.push('/User')
        /*带参数
                    history.push('/User',{'id':id})
                    //接收this.props.location.state.id
                */
    }
    render() {
        return (
          <div onClick={this.linkTo.bind(this)}>
          </div>
        );
    }
}

6.HashRouter
browserHistory需要服务端配置，因为真实URL其实是指向服务器资源，比如我们经常使用的API接口，也是一个真实URL的资源路径，当通过真实URL访问网站的时候，第一次访问的是网站的域名，这个时候可以正常加载我们的网站js等文件，而用户手动刷新网页时，由于路径是指向服务器的真实路径，服务器端没有做路由配置，就会导致资源不存在，用户访问的资源不存在，返回给用户的是404错误。通过hashHistory来生成的URL就不会出现这样的问题，因为他不是指向真实的路由。
import {HashRouter as Router,Route ,Switch, Redirect} from 'react-router-dom';

render((
    <Router >
        <Switch>
            <Route path='/Login' component={Login}/>
            <Route path='/Course' component={Course}/>
            <Route path='/User' component={User}/>
            <Route exact path='/Mine/UserInfo' component={UserInfo}/>
        <Route exact path='/Mine/UserInfo/Set' component={SetValue}/>
            <Redirect from='/' to='/Index'/>
        </Switch>
    </Router >
), document.getElementById('root'));

App.contextTypes = {  
     router:React.PropTypes.object  
}  
class App extends Component {
    linkTo(){
        const { history } = this.context.router
        history.goBack()
        或history.replace('/index')  
        或history.push('/User')
        /*带参数
         history.push({
            pathname: '/Detail',
            search: '?id=' + 1,
         })
         接收：import queryString from 'query-string'；
               const parsed = queryString.parse(this.props.location.search);
               this.setState({
                  sort: parsed.sort
               })
           */
    }
    render() {
        return (
          <div onClick={this.linkTo.bind(this)}>
          </div>
        );
    }
}