Was sind Reaktionsrouten?-Front-End-Fragen und Antworten-php.cn

Was sind Reaktionsrouten?

藏色散人

Freigeben： 2023-01-04 16:46:56

Original

1874 Leute haben es durchsucht

React Routing umfasst: 1. Seitenrouting, Code wie „window.location.href='...'history.back()“ 2. h5-Routing, Code wie „window.onchange = function () { console. log(window.location.hash)}“; 3. Hash-Routing, Code wie „history.pushState(...)“.

Was sind Reaktionsrouten?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was sind die Reaktionsrouten?

Routing in React

1. Drei gängige Routen

(1) Seitenrouting

window.location.href='https://www.hao123.com/'
history.back()

Nach dem Login kopieren

(2) h5-Routing

window.location = '#hash'
window.onchange = function () {
    console.log(window.location.hash)
}

Nach dem Login kopieren

(3) Hash-Routing

//推进一个状态
history.pushState('name','title','/path')
//替换一个状态
history.replaceState('name','title','/path')

Nach dem Login kopieren

2. Einführung in das React-Router-Routing 3. Grundoption

: Lösen Sie das Übereinstimmungsproblem, passen Sie es der Reihe nach an. Wenn es mit dem vorherigen übereinstimmt, wird es nicht übereinstimmen.

Zum Beispiel: /path und path/list passen zu /path, was nicht den gewünschten Effekt erzielen kann. Sie müssen genau gleich sein, um eine Übereinstimmung zu erzielen.

4. Sprungnavigation, entspricht einem Tag

: Sprungseite

: Erweiterte Version von Link

5. Automatischer Sprung

: Kein Klicken erforderlich, es wird automatisch gesprungen, wenn dieser Block ausgeführt wird.

3. Verwendung von React-Router. 1. Paket importieren „react-router-dom“;

2. BrowserRouter-Paket

<BrowserRouter>
    <div>
        <Route path={&#39;/&#39;} exact component={Home}></Route>
        <Route path={&#39;/detail/&#39;} component={Detail}></Route>
    </div>
</BrowserRouter>

Nach dem Login kopieren

Komponente wird verwendet, um die zu überspringende Routing-Seite zu ändern: Home und Detail sind zwei echte Komponenten

Pfad: passende Routing-Regeln

exakt: Ändern Sie den Übereinstimmungseffekt. Wenn Sie ihn hinzufügen, bedeutet dies eine genaue Übereinstimmung. Wenn Sie ihn nicht hinzufügen, bedeutet dies eine Fuzzy-Übereinstimmung. Beispiel:

path={'/'} bedeutet Übereinstimmung: http://localhost:3000/, wenn es sich um http handelt: // Localhost:3000/99 kann nicht abgeglichen werden

path={'/detail/'} bedeutet Übereinstimmung: http://localhost:3000/detail/xxxxxxx, letzteres ist nicht eingeschränkt und die vorherige Übereinstimmung ist in Ordnung

3. Übergeben des Werts der Route

http://localhost:3000/detail

(1) Übergeben des Werts des Routing-Parameters

Sprungparameter:

Parameter empfangen ：

this.props.match.params.id

Drucken Sie das Ergebnis aus

3. Direkt verwenden

Auf Ergebnisse zugreifen

http://localhost:3000/detail/3

(2) Routing-Parameterwertübergabe

Routing-Parameter

Sprungparameter:

Empfangsparameter:

this.props.location.search

Ergebnis drucken

?id=3. Sie müssen es selbst analysieren

Zugriff auf Ergebnisse

http://localhost:3000/detail?id=3

4. Sprungprinzip

Der Link zum Parameter entspricht dem Pfadparameter in der Route und dann dem Sprung Wird ausgeführt, springen Sie zum Komponentensatz in der Komponente in Route.

Ein Bild der Online-Zusammenfassung beschreibt es gut:

Lernempfehlung: „

Video-Tutorial reagieren
“

Das obige ist der detaillierte Inhalt vonWas sind Reaktionsrouten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!