這篇文章主要介紹了react如何實(shí)現(xiàn)頁(yè)面組件跳轉(zhuǎn)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司憑借專(zhuān)業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專(zhuān)業(yè)的網(wǎng)站策劃、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站優(yōu)化、軟件開(kāi)發(fā)、網(wǎng)站改版等服務(wù)，在成都10余年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都上1000家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

跳轉(zhuǎn)方法：1、利用Link標(biāo)簽，語(yǔ)法“<Link to='跳轉(zhuǎn)地址'></Link>”；2、利用push()，語(yǔ)法“push("跳轉(zhuǎn)地址")”；3、利用history()，語(yǔ)法“this.props.history.goBack();”等。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

React中幾種頁(yè)面（組件）跳轉(zhuǎn)方式

1、使用 react-router-dom 中的 Link 實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

一般適用于，點(diǎn)擊按鈕或其他組件進(jìn)行頁(yè)面跳轉(zhuǎn)，具體使用方式如下：

<Link
    to={{
        pathname: '/path/newpath',
        state: {  // 頁(yè)面跳轉(zhuǎn)要傳遞的數(shù)據(jù)，如下
              data1: {}，
              data2: []
        },
    }}
>
   <Button>
        點(diǎn)擊跳轉(zhuǎn)
   </Button>
</Link>

2、使用 react-router-redux 中的 push 進(jìn)行頁(yè)面跳轉(zhuǎn)

react-router-redux 中包含以下幾個(gè)函數(shù)，一般會(huì)結(jié)合redux使用：

• push - 跳轉(zhuǎn)到指定路徑

• replace - 替換歷史記錄中的當(dāng)前位置

• go - 在歷史記錄中向后或向前移動(dòng)相對(duì)數(shù)量的位置

• goForward - 向前移動(dòng)一個(gè)位置。相當(dāng)于go(1)

• goBack - 向后移動(dòng)一個(gè)位置。相當(dāng)于go(-1)

具體使用時(shí)通過(guò)發(fā)送disppatch來(lái)進(jìn)行頁(yè)面跳轉(zhuǎn)：

let param1 = {}
dispatch(push("/path/newpath'", param1));
dispatch(replace("/path/newpath'", param1));

3、使用RouteComponentProps 中的history進(jìn)行頁(yè)面回退

一般在完成某種操作，需要返回上一個(gè)頁(yè)面時(shí)使用。

this.props.history.goBack();

4、打開(kāi)一個(gè)新的tab頁(yè)，并截取路徑

首先定義路由為 :

path: "/pathname/:param1/:param2/:param3",

點(diǎn)擊事件跳轉(zhuǎn)到新頁(yè)面 打開(kāi)一個(gè)新的tab：

window.open(`pathname/${param1}/${param2}/${param3}`)

在新的頁(yè)面獲取路徑上的參數(shù)：

param1:  this.props.match.params.param1, 
param2:  this.props.match.params.param2, 
param3:  this.props.match.params.param3,

獲取路徑參數(shù) :

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 "";
　　}　
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“react如何實(shí)現(xiàn)頁(yè)面組件跳轉(zhuǎn)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前名稱(chēng)：react如何實(shí)現(xiàn)頁(yè)面組件跳轉(zhuǎn)
文章網(wǎng)址：http://jinyejixie.com/article8/jdoeop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、云服務(wù)器、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)