So implementieren Sie den Seitenkomponenten-Sprung in React

Jump-Methode: 1. Verwenden Sie das Link-Tag, die Syntax „“ 2. Verwenden Sie push(), die Syntax „push("Jump-Adresse"). "; 3. Verwenden Sie History(), die Syntax „this.props.history.goBack();" usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Mehrere Seiten-(Komponenten-)Sprungmethoden in React

1. Verwenden Sie den Link in React-Router-Dom, um einen Seitensprung zu erreichen.

Im Allgemeinen anwendbar auf Seitensprünge durch Klicken auf Schaltflächen oder andere Komponenten. Die spezifische Verwendung dieser Methode ist wie folgt folgt:

<Link
    to={{
        pathname: &#39;/path/newpath&#39;,
        state: {  // 页面跳转要传递的数据，如下
              data1: {}，
              data2: []
        },
    }}
>
   <Button>
        点击跳转
   </Button>
</Link>

2. Verwenden Sie Push in React-Router-Redux, um zur Seite zu springen.

React-Router-Redux enthält die folgenden Funktionen, die im Allgemeinen in Kombination mit Redux verwendet werden:

• Push – Springe zu den angegebenen Pfad
• replace – die aktuelle Position im Verlauf ersetzen
• go – eine relative Anzahl von Positionen im Verlauf nach hinten oder vorne verschieben
• goForward – eine Position nach vorne verschieben. Entspricht go(1)
• goBack – eine Position rückwärts bewegen. Äquivalent zu go(-1)

Bei spezifischer Verwendung werden Seitensprünge durch Senden von „dispatch“ ausgeführt:

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

3. Verwenden Sie den Verlauf in RouteComponentProps, um ein Seiten-Rollback durchzuführen. Im Allgemeinen müssen Sie nach Abschluss eines Vorgangs Folgendes tun Zurück zur vorherigen Seite. Wird für eine Seite verwendet.

this.props.history.goBack();

4. Öffnen Sie eine neue Registerkarte und fangen Sie den Pfad ab

Definieren Sie zunächst die Route als:

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

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

Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Seitenkomponenten-Sprung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!