跳轉方法：1.利用Link標籤，語法「」；2、利用push()，語法「push("跳轉位址")」；3、利用history()，語法「this.props.history.goBack();」等。
本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。
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使用：
具體使用時透過發送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",
點選事件跳到新頁面開啟一個新的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怎麼實現頁面元件跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！
