react 跳转页面

React-Router 4.0版本以上

第一种：this.props.history.push(path)

React-Router 4.0对路由进行了改进，router属性改为了history属性，使用方法还是和3.0差不多，任何需要跳转的地方使用this.props.history.push('/path') 就可以进行跳转了

参数的获取

使用this.props.match.params.xxx 可以获取到当前路由的参数

第二种：this.context.router.push(path)

文件要额外添加一些内容

[sql]  view plain  copy

1. class Example extends React.Component {  
2.     constructor(props, context) {  
3.         super(props, context);  
4.         this.context.router; // it works  
5.     }  
6.     ...  
7.     this.context.router.push(path);  
8. }  
9.   
10. Example.contextTypes =  {  
11.     router: React.PropTypes.object  
12. };  

[sql]  view plain  copy

1. class index extends React.Component {    
2.     render() {    
3.         return (    
4.             <div>    
5.                 home page    
6.             </div>    
7.         );    
8.     }    
9.     
10.     componentWillMount() {    
11.         if (noLogin == 1) {    
12.             this.context.router.push({ pathname : '/', state : { msg : 'you have logined and will redirect to your page'}});    
13.         } else if (noLogin == 0) {    
14.             this.context.router.push({ pathname : '/login', state : { msg : 'you do not login yet, please login' }});    
15.         }    
16.     }    
17. }    

[sql]  view plain  copy

1. class LoginPage extends React.Component {    
2.     constructor(props, context) {    
3.         super(props, context);    
4.     }    
5.     render() {    
6.         return (    
7.             <div>    
8.                 {this.props.location.state}    
9.             </div>    
10.         );    
11.     }    
12. }