1、系统内部的跳转

• 效果：单击"跳转"按钮，可以跳转到系统内指定的页面

       第一步：定义router

import Login_Index from '../components/Login_Index.js';//引入页面  
<Route path="/Login_Index " component={Login_Index }/> //path:单纯路径  

  （1）代码实现：第一种方式，使用link to，进一步了解link用法请参考：

https://blog.csdn.net/zrcj0706/article/details/78577328

<Link to="/Login_Index"> <Button style={buttoncolor} size="large">跳转</Button></Link>

  （2）代码实现：第二种方式，使用react-router，

//第一步：引入 PropTypes 
import PropTypes from "prop-types";

//第二步：设置contextTypes 、constructor(props, context)
   static contextTypes = {
        router: PropTypes.object
    }
    constructor(props, context) {
        super(props, context)
    }

//第三步：根据判断，进行对应跳转
  <Button  onClick={this.onclick_button.bind(this, '跳转')}>跳转</Button> //单击执行函数onclick_button
//定义单击函数事件onclick_button
  onclick_button(button_name) {
    if (button_name == 'react-router跳转') {
      this.context.router.history.push("跳转");//路由跳转
    }
  }

2、系统外部的跳转

• 效果：单击"跳转"按钮，可以跳转到系统外部的页面，比如百度

     第一步：定义router

import Login_Index from '../components/Login_Index.js';//引入页面  
<Route path="/Login_Index " component={Login_Index }/> //path:单纯路径  

  （1）代码实现：第一种方式，使用link to，进一步了解link用法，请参考

<Link to="https://www.baidu.com/"> <Button style={buttoncolor} size="large">跳转</Button></Link>

  （2）代码实现：第二种方式，使用window.location.href

  //根据判断，进行对应跳转
  <Button  onClick={this.onclick_button.bind(this, '跳转')}>跳转</Button> //单击执行函数onclick_button
  //定义单击函数事件onclick_button
    onclick_button(button_name) {
      if (button_name == 'react-router跳转') {
        window.location.href = 'https://www.baidu.com/';  //window.location.href跳转
      }
    }