react跳转页面在新窗口打开,react跳转页面后又跳转回来

　　本教程运行环境：Windows7系统，React版本react17.0.1，Dell G3电脑。

React中几种页面（组件）跳转方式

　　1、使用 react-router-dom 中的 Link 实现页面跳转

　　一般适用，点击按钮或其他组件进行页面跳转。具体使用方式如下：

　　环

　　to={{

　　路径名：“/path/newpath”，

　　State: {//页面跳转要传递的数据如下

　　数据1: {}，

　　数据2: []

　　},

　　}}

　　纽扣

　　点击跳转

　　/按钮

　　/Link2、使用 react-router-redux 中的 push 进行页面跳转

　　React-router-redux包含以下功能，通常与redux结合使用：

　　推-跳到指定的路径替换-替换历史中的当前位置前进-向后或向前移动相对数量的位置前进-向前移动一个位置。相当于go(1)go back——向后移动一个位置。相当于围棋(-1)。具体使用时，可以通过发送disppatch从一页跳到另一页：

　　设param1={}

　　分派(推送(/path/newpath ，param 1))；

　　分派(替换(/path/newpath ，param 1))；3、使用RouteComponentProps 中的history进行页面回退

　　一般在完成一个操作后需要返回上一页时使用。

　　this . props . history . go back()；4、打开一个新的tab页，并截取路径

　　首先，将路线定义为：

　　路径：/pathname/:param 1/:param 2/:param 3 ，单击事件跳转到新页面以打开新选项卡：

　　新页面获取路径上window . open(` pathname/$ { param 1 }/$ { param 2 }/$ { param 3 } `)的参数：

　　param 1:this . props . match . params . param 1，

　　param 2:this . props . match . params . param 2，

　　param 3:this . props . match . params . param 3，获取路径参数：

　　路径？key 1=value 1 key 2=value 2 const query=this . props . match . location . search

　　const arr=query . split()//[？key1=value1 ， key2=value2]

　　const successCount=arr[0]。substr(6) //value1

　　Constfailed count=arr [1]。substr (6)//value2 或

　　函数GetUrlParam(url，paramName) {

　　var arr=url.split(？));

　　if(数组长度1) {

　　var paramArr=arr[1]。拆分(“”)；

　　var arr

　　for(var I=0；i paramArr.lengthi ) {

　　arr=paramArr[i]。拆分(=)；

　　如果(arr！=null arr[0]==paramName) {

　　return arr[1]；

　　}

　　}

　　返回“”；

　　}否则{

　　返回“”；

　　}

　　}推荐学习：《react视频教程》以上是react如何实现页面组件跳转的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。