Ein kurzer Vortrag über die Geschichte von React Router

Wenn Sie React Router verstehen möchten, sollten Sie zunächst die Geschichte verstehen. Genauer gesagt ist es das Verlaufspaket, das die Kernfunktionalität für React Router bereitstellt. Damit können Sie Ihrem Projekt ganz einfach eine standortbasierte Navigation auf der Clientseite hinzufügen, eine Funktion, die für Single-Page-Anwendungen von entscheidender Bedeutung ist.

npm install --save Verlauf

Es gibt drei Arten von Verlauf: Browser, Hash und Speicher. Das Verlaufspaket bietet Methoden zum Erstellen aller Verlaufstypen.

importieren {
 BrowserHistory erstellen,
 erstelleHashHistory,
 Speicherverlauf erstellen
} aus 'Geschichte'

Wenn Sie React Router verwenden, wird das Verlaufsobjekt automatisch für Sie erstellt, sodass Sie nicht direkt mit dem Verlauf interagieren müssen. Dennoch ist es wichtig, die unterschiedlichen Verlaufstypen zu verstehen, damit Sie entscheiden können, welchen Sie in Ihrem Projekt verwenden möchten.

Was ist Geschichte?

Unabhängig davon, welchen Verlauf Sie erstellen, erhalten Sie am Ende ein Objekt mit nahezu denselben Eigenschaften und Methoden.

Standort

Das wichtigste Attribut des Verlaufsobjekts ist der Standort. Das Standortobjekt spiegelt den „Standort“ der aktuellen Anwendung wider. Es enthält von „URL“ abgeleitete Attribute wie Pfadname, Suche [Anmerkung 1] und Hash.

Darüber hinaus ist jedem Standort ein eindeutiger Schlüssel zugeordnet. „Schlüssel“ wird verwendet, um einen bestimmten Ort zu identifizieren und Daten an einem bestimmten Ort zu speichern.

Schließlich kann den Standorten ein Status zugeordnet werden. Dies sind feste Daten und kommen in der URL nicht vor.

{
 Pfadname: '/hier',
 Suche: '?Schlüssel=Wert',
 Hash: '#zusätzliche-Informationen',
 Status: { modal: true },
 Schlüssel: „abc123“
}

Wenn ein Verlaufsobjekt erstellt wird, muss der Speicherort initialisiert werden. Der Prozess ist für verschiedene Geschichtstypen unterschiedlich. Beispielsweise analysiert der Browserverlauf die aktuelle URL.

Ein Standort, sie zu beherrschen?

Während wir nur auf den aktuellen Standort zugreifen können, verfolgt das Verlaufsobjekt eine Reihe von Standorten. Aufgrund der Möglichkeit, Standorte hinzuzufügen und auf jeden Standort im Array zuzugreifen, wird der Verlauf als „Verlauf“ bezeichnet. Wenn die Geschichte nur den aktuellen Standort aufzeichnen kann, sollte sie „Gegenwart“ heißen.

Neben einer Reihe von Standorten wird im Verlauf auch ein Indexwert gespeichert, der auf den aktuellen entsprechenden Standort verweist.

Für den Speicherverlauf werden sie direkt definiert. Was den Browserverlauf und den Hash-Verlauf betrifft, werden die Arrays und Indizes vom Browser gesteuert und können nicht direkt aufgerufen werden [Anmerkung 2].

Navigationsmethode <br /> Man kann sagen, dass die Navigationsmethode dem Verlaufssystem mit dem Standortattribut den letzten Schliff verleiht. Mit der Navigation können Sie den aktuellen Standort ändern.

Push-Methode
Mit der Push-Methode können Sie an eine neue Stelle springen. Durch das Hinzufügen eines neuen Standorts nach dem aktuellen Standort werden alle „zukünftigen“ Standorte gelöscht (zuvor erstellte Standorte nach dem aktuellen Standort durch die Zurück-Schaltfläche).

Wenn Sie auf <Link> klicken, wird standardmäßig die Methode history.push zum Navigieren aufgerufen.

history.push({ Pfadname: '/neuer-Ort' })

ersetzen
Die Ersetzungsmethode ähnelt der Push-Methode, aber anstatt einen Speicherort hinzuzufügen, ersetzt sie den Speicherort am aktuellen Index. Der „zukünftige“ Standort wird nicht geräumt.

Verwenden Sie beim Umleiten „Ersetzen“. Dies ist auch der Ansatz, der in der <Redirect>-Komponente von React Router verwendet wird.

Wenn Sie beispielsweise durch Klicken auf eine Link-Schaltfläche auf Seite 1 zu Seite 2 navigieren, werden Sie von Seite 2 möglicherweise auf Seite 3 weitergeleitet. Bei Verwendung der Push-Methode erfolgt durch Klicken auf die Zurück-Schaltfläche die Rückkehr von Seite 3 zu Seite 2 (mit der Möglichkeit einer Weiterleitung auf Seite 3). Wenn die Ersetzungsmethode verwendet wird, wird Seite 1 direkt von Seite 3 zurückgegeben.

history.replace({ Pfadname: '/gehe-hierher-stattdessen' })

Geh! Geh! Geh
Schließlich gibt es drei Methoden mit ‚go‘, nämlich goBack, goForward und go.
goBack gibt eine Seitenebene zurück. Tatsächlich reduziert es den Indexwert der Historie um 1.

Verlauf.goBack()

goForward ist das Gegenteil von goBack. Eine Seite vorwärtsblättern. Dies wird nur wirksam, wenn Sie einen „zukünftigen“ Standort haben, d. h. wenn der Benutzer auf die Zurück-Schaltfläche klickt.

Verlauf.goForward()

go ist eine leistungsstarke Methode, die die Funktionalität von goForward und goBack umfasst. Bei Eingabe einer negativen Zahl erfolgt eine Rückwärtsbewegung, bei Eingabe einer positiven Zahl eine Vorwärtsbewegung.

Geschichte.go(-3)

Monitor!

Im Beobachtermodus sendet der Verlauf eine Benachrichtigung, wenn sich der Standort ändert. Jedes Verlaufsobjekt verfügt über eine Listenmethode, die eine Funktion als Parameter akzeptiert. Diese Funktion wird dem Array der im Verlauf gespeicherten Listener-Funktionen hinzugefügt. Wenn sich der Standort ändert (z. B. wenn der Code eine Verlaufsmethode aufruft oder der Benutzer auf eine Browserschaltfläche klickt), ruft das Verlaufsobjekt alle Listener-Methoden auf. Auf diese Weise können Sie Code so einrichten, dass er aktualisiert wird, wenn sich der Standort ändert.

const duSindHere = document.getElementById('duSindHere')
history.listen(Funktion(Standort) {
 youAreHere.textContent = Standort.Pfadname
})

Die Routerkomponente von React Router abonniert das Verlaufsobjekt, sodass es bei einer Standortänderung erneut gerendert werden kann.

Dinge miteinander verknüpfen

Jede Verlaufsklasse verfügt über eine Methode „createHref“, die ein Standortobjekt annimmt und eine URL ausgibt.
Die interne Navigation durch den Verlauf erfolgt über Standortobjekte. Allerdings kennt es, ebenso wie das Ankerelement (a), weder das Verlaufspaket noch weiß es, was das Standortobjekt ist. Damit das generierte HTML auch ohne Verlauf navigierbar bleibt. Wir müssen die eigentliche URL generieren.

const Standort = {
 Pfadname: '/one-fish',
 Suche: '?two=fish',
 Hash: „#roter-Fisch-blauer-Fisch“
}
const url = history.createHref(Standort)
const link = document.createElement('a')
a.href = URL
// <a href='/ein-Fisch?zwei=Fische#roter-Fisch-blauer-Fisch'></a>

Das Obige deckt die grundlegende Verlaufs-API ab. Obwohl es andere Eigenschaften und Methoden gibt, die nicht vorgestellt wurden, können Ihnen die oben genannten Methoden dabei helfen, die Funktionsweise des Verlaufsobjekts zu verstehen.

Alles zusammenbringen

Es gibt immer noch Unterschiede zwischen den verschiedenen Geschichtstypen, daher müssen Sie bei der Auswahl eines für Ihr Projekt geeigneten Geschichtstyps überlegen.
Mit diesen dreien sollte jeder Anwendungsfall abgedeckt sein.

Im Browser

In Browserumgebungen werden sowohl der Browserverlauf als auch der Hash-Verlauf verwendet. Sie interagieren mit den Web-APIs für Verlauf und Standort, sodass der aktuelle Standort mit dem übereinstimmt, der in der Adressleiste des Browsers angezeigt wird.

const browserHistory = createBrowserHistory()
const hashHistory = createHashHistory()

Der größte Unterschied zwischen den beiden besteht in der Art und Weise, wie sie aus einer URL einen Standort erstellen. Der Browserverlauf verwendet die vollständige URL[Anmerkung 3], während der Hash-Verlauf nur den Teil der URL nach dem ersten Hash verwendet.

// Geben Sie die folgende URL an
url = 'http://www.example.com/dies/ist/der/Pfad?schlüssel=wert#hash'
// Standortobjekt, das durch den Browserverlauf erstellt wurde:
{
 Pfadname: '/dies/ist/der/Pfad',
 Suche: '?Schlüssel=Wert',
 Hash: "#Hash"
}
//Das durch den Hash-Verlauf erstellte Standortobjekt:
{
 Pfadname: 'Hash',
 suchen: '',
 Hash: ''
}

Hashing verwenden

Warum benötigen Sie den Hash-Verlauf? Wenn Sie zu einer URL navigieren, muss theoretisch eine entsprechende Datei auf dem Server vorhanden sein. Für die dynamische Bereitstellung muss die angeforderte Datei nicht tatsächlich vorhanden sein. Stattdessen untersucht der Server die angeforderte URL und entscheidet, welches HTML zurückgegeben werden soll.

Die statische Dateibereitstellung kann jedoch Dateien direkt von der Festplatte zurückgeben. Die dynamischste Funktion der statischen Bereitstellung besteht darin, die Datei „index.html“ aus einem Verzeichnis zurückzugeben, wenn die URL das Verzeichnis angibt.

Aufgrund dieser Einschränkung bei der Bereitstellung statischer Dateien besteht die einfachste Lösung [Anmerkung 4] darin, für die Rückgabe der Abrufanforderung des Benutzers nur einen realen Speicherort auf dem Server zu verwenden. Wenn Sie nur einen Standort haben, hat Ihre Anwendung natürlich auch nur eine URL und Sie können den Verlauf nicht verwenden. Um dieses Problem zu lösen, verwendet der Hash-Verlauf den gehashten Teil der URL, um den Standort zu lesen und zu schreiben.

// Wenn example.com den statischen Ressourcendienst verwendet, erhalten diese drei URLs dieselben Daten von // /my-site/index.html http://www.example.com/my-site#/one
http://www.example.com/meine-site#/zwei
// Aufgrund der Verwendung des Hash-Verlaufs sind die Speicherorte der drei in der Anwendung jedoch unterschiedlich.
// Weil der Standort vom Hash-Teil der URL abhängt { pathname: '/one' }
{ Pfadname: '/zwei' }

Obwohl der Hash-Verlauf gut funktioniert, gilt er als anfällig für Hackerangriffe, da er darauf basiert, alle Pfadinformationen im Hash der URL zu speichern. Erwägen Sie daher die Verwendung nur, wenn Ihre Website nicht über dynamische Dienste verfügt.

Speicher: gesamten Verlauf zwischenspeichern

Das Beste an der Verwendung von Speicherorten besteht darin, dass Sie sie überall dort verwenden können, wo Sie JavaScript verwenden können.

Ein einfaches Beispiel ist, dass Sie es in einem Komponententest verwenden können, indem Sie Node ausführen. Auf diese Weise können Sie Ihren Code testen, ohne für die Ausführung auf einen Browser angewiesen zu sein.

Noch erstaunlicher ist, dass der Speicherverlauf in Apps verwendet werden kann. In react-nativeapp verwendet react-router-native den Speicherverlauf, um standortbasierte Navigation zu implementieren.

Wenn Sie möchten, können Sie den Speicherverlauf in Ihrem Browser verwenden. (Allerdings verlieren Sie dadurch die Möglichkeit, mit der Adressleiste zu interagieren.)

Der größte Unterschied zwischen diesem Speicherverlauf und den anderen beiden Verlaufstypen besteht darin, dass er seinen eigenen Standort beibehält. Beim Erstellen eines Speicherverlaufs können Sie Informationen übergeben, um den Status zu initialisieren. Dieser Status ist ein Array von Standorten und dem Index des aktuellen Standorts [Anmerkung 5]. Dies unterscheidet sich von den anderen beiden Verlaufstypen, bei denen dieser Standort-Array vom Browser gespeichert werden muss.

const history = createMemoryHistory({
 anfänglicheEinträge: ['/', '/nächste', '/letzte'],
 Anfangsindex: 0
})

Es ist ein bewährter Ansatz, diese relativ langwierigen und fehleranfälligen Aufgaben mithilfe der Verlaufsfunktion für Sie zu erledigen.

Unabhängig davon, welchen Verlaufstyp Sie auswählen, sind beide äußerst benutzerfreundlich und verfügen über leistungsstarke Funktionen für die Navigation und die standortbasierte Darstellung.

Hinweise

[1] Die Sucheigenschaft ist eine Zeichenfolge und kein analysiertes Objekt. Da sich die meisten Pakete zur Zeichenfolgenanalyse in ihrer Verwendung unterscheiden. Daher überlässt History die Wahl dem Entwickler, anstatt die Verwendung eines bestimmten String-Parsing-Pakets zu erzwingen. Wenn Sie mehr erfahren möchten, hier sind einige beliebte: query-string, querystring vs. native URLSearchParams

[2] Dies ist eine Sicherheitseinschränkung. Im Browser enthält das Standort-Array des Verlaufs nicht nur die Informationen zu den besuchten Standorten. Wenn der Browser geöffnet ist, werden die Informationen zum Browserverlauf des Benutzers weitergegeben, sodass dieser nicht für den Zugriff geöffnet werden kann.

[3] Standardmäßig ist der Pfadname des vom Browserverlauf erstellten Standortobjekts der vollständige Pfadname der URL. Natürlich können Sie einen Basisnamen für den Verlauf angeben. In diesem Fall wird dieser Teil des Pfadnamens ignoriert.

const history = createBrowserHistory({ Basisname: '/Pfad' })
// Gegeben ist die Pfad-URL: http://www.example.com/Pfad/hier
// Das Verlaufsobjekt erstellt den folgenden Speicherort
{ Pfadname: '/hier', ... }

[4] Theoretisch wäre es möglich, dass jede gültige URL in Ihrer Anwendung dieselbe HTML-Datei zurückgibt. Dies ist zwar in Ordnung, kann jedoch zur Erstellung vieler redundanter Dateien führen, wenn alle Ihre URLs statisch sind. Allerdings ist es nicht praktikabel, mit einer großen Zahl von Parametern eine große Zahl möglicher Adressen für jede Adresse zuzuordnen.
[5] Wenn das Array und der Index für den Initialisierungsort des Speicherverlaufs nicht angegeben sind, werden die folgenden Standardwerte generiert:

Einträge = [{ Pfadname: '/' }]
Index = 0

Für die meisten Anwendungen ist dies ausreichend, aber das Vorausschreiben des Verlaufs ist immer noch eine sehr nützliche Methode zum Wiederherstellen von Inhalten.

Dies ist das Ende dieses Artikels über die Geschichte von React Router. Weitere Informationen zur Geschichte von React Router finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!