react怎麼實現頁面元件跳轉

跳轉方法：1.利用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: &#39;/path/newpath&#39;,
        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",

點選事件跳到新頁面開啟一個新的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中文網其他相關文章！