自动跳转方式：1、运用Link标签，词法“<Link to='自动跳转详细地址'></Link>”；2、运用push()，词法“push("自动跳转详细地址")”；3、运用history()，词法“this.props.history.goBack();”等。
本实例教程作业环境：Windows7系统软件、react17.0.1版、Dell G3计算机。
React中几类网页页面（部件）自动跳转方法
1、应用 react-router-dom 里的 Link 完成网页跳转
一般适用于，点击图标或其它部件开展网页跳转，实际使用方法如下所示：
<Link
to={{
pathname: '/path/newpath',
state: { // 网页跳转要传达的数据信息，如下所示
data1: {}，
data2: []
},
}}
>
<Button>
点击跳转
</Button>
</Link>2、应用 react-router-redux 里的 push 开展网页跳转
react-router-redux 其中包含以下几种函数公式，一般会融合redux应用：
- push - 跳转特定途径
- replace - 更换历史数据里的所在位置
- go - 在历史数据中往后或往前挪动相对性数量部位
- goForward - 往前挪动一个位置。等同于go(1)
- goBack - 往后挪动一个位置。等同于go(-1)
实际使用中根据推送disppatch去进行网页跳转：
let param1 = {}
dispatch(push("/path/newpath'", param1));
dispatch(replace("/path/newpath'", param1));3、应用RouteComponentProps 里的history开展网页页面返回
一般在做完某类实际操作，必须回到上一个网页页面时进行。
this.props.history.goBack();
4、开启一个新的tab页，并提取途径
最先界定路由器为 :
path: "/pathname/:param1/:param2/:param3",
js点击事件跳转新窗口 开启一个新的tab：
window.open(`pathname/${param1}/${param2}/${param3}`)进新页面获得途径里的主要参数：
param1: this.props.match.params.param1,
param2: this.props.match.params.param2,
param3: this.props.match.params.param3,
获得途径主要参数 :
path?key1=value1&key2=value2
const query = this.props.match.location.search
const arr = query.split('&') // ['?key1=value1', '&key2=value2']
const successCount = arr[0].substr(6) // 'value1'
const failedCount = arr[1].substr(6) // 'value2'或是
function GetUrlParam(url, paramName) {
var arr = url.split("?");
if (arr.length > 1) {
var paramArr= arr[1].split("&");
var arr;
for (var i = 0; i < paramArr.length; i ) {
arr = paramArr[i].split("=");
if (arr != null && arr[0] == paramName) {
return arr[1];
}
}
return "";
}else {
return "";
}
}强烈推荐学习培训：《react视频教程》
以上就是关于react如何完成网页页面部件自动跳转的具体内容，大量欢迎关注AdminJS其他类似文章！