深度剖析React中如何实现系统内外的跳转

1、系统内部的跳转

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



       第一步：定义routerimport 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、系统外部的跳转

效果：单击"跳转"按钮，可以跳转到系统外部的页面，比如百度
     第一步：定义routerimport 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="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跳转
}
}