React中如何实现系统内外的跳转

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用法，请参考

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跳转

}

}