react如何實現頁面組件跳轉

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

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

本教程操作環(huán)境：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)

具體使用時通過發(fā)送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如何實現頁面組件跳轉”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!