1. 程式人生 > >React中的跳轉

React中的跳轉

1.在react中用元件本身跳轉直接:

  this.props.history.push('wait/detail',{pmdata:ss,state:state})

  元件接收引數:

  console.log("接參",this.props.history.location.state.pmdata)

  如果方法寫在子元件中,父元件需要傳遞一個方法,不然會報錯push is not a function

<Historys  history ={this.props.history}/>

2.跳轉到制定某個網址(如a連結跳轉)

    window.open(`${option.api.downloadFile}?id=${record.fileId}`)}  企業微信不支援window.open跳轉

 

3.js實現頁面跳轉,location.href和location.replace和location.reload的區別

轉自(https://www.cnblogs.com/lina6251125/p/6392299.html

  • reload 方法,該方法強迫瀏覽器重新整理當前頁面。

    語法: location.reload([bForceGet])                                                                                                                          

    引數: bForceGet,可選引數,預設為false,從客戶端快取裡取當前頁。如果設定為true, 則以 GET 方式,從服務端取最新的頁面, 相當於客戶端點選 F5("重新整理")

replace 方法,該方法通過指定URL替換當前快取在歷史裡(客戶端)的專案,因此當使用replace方法之後,你不能通過“前進”和“後退”來訪問已經被替換的URL。

    語法: location.replace(URL)                                                                                                     

    引數: URL

    在實際應用的時候,重新重新整理頁面的時候,我們通常使用: location.reload() 或者是 history.go(0) 來做。因為這種做法就像是客戶端點F5重新整理頁面,所以頁面的method="post"的時候,會出現“網頁過期”的提示。那是因為Session的安全保護機制。

可以想到:當呼叫 location.reload() 方法的時候,頁面此時在服務端記憶體裡已經存在, 因此必定是IsPostback 的。

    如果有這種應用:我們需要重新載入該頁面,也就是說我們期望頁面能夠在服務端重新被建立,我們期望是 Not IsPostback 的。這事,location.replace() 就可以完成此任務。被replace的頁面每次都在服務端重新生成。可以這麼寫:location.replace(location.href)

而重定向則用herf 和replace 

1、location.href='http://www.xxx.com/';

2、location.replace('http://www.xxx.com/');

兩者的不同之處是前者會在瀏覽器的歷史瀏覽記錄(history物件中增加一條新的記錄,而後者則是相當於用replace中的url代替了現有的頁面url,並把history中的url也替換為重定向後的url。