Per Anhalter durch React Router v4: [Spiel, Ort, Verlauf] - Ihre besten Freunde!

Hallo! Willkommen im Per Anhalter durch React Router v4, Teil II!

Nachdem wir mit unserer ersten kleinen App den Startschuss gegeben haben, konzentrieren wir uns auf Ihre drei Mitreisenden: Spiel , Ort und Geschichte .

Was passiert, wenn Sie in Ihren Home Component-Code gelangen und dort ein console.log einfügen , um die Requisiten zu überprüfen?

Der Router führt die folgenden Objekte in Ihre Komponente ein:

Beeindruckend! Woher kommt das? ?

Nun, jede Ansicht, Komponente oder was auch immer vom Router umschlossen wird, hat diese Objekte. erledigt seine Aufgabe als Komponente höherer Ordnung und verpackt Ihre Komponenten oder Ansichten und fügt diese drei Objekte als Requisiten in sie ein.

Also… warum sind sie da und welchen Nutzen kann ich daraus ziehen? ?

Sie werden deine besten Freunde sein! Vertrau mir! ?

Spiel

Das Übereinstimmungsobjekt enthält Informationen darüber, wie a stimmte mit der URL überein.

  • Parameter : (Objekt), Schlüssel / Wert-Paare, die aus der URL analysiert werden, die den dynamischen Segmenten des Pfads entspricht
  • isExact : (boolean), true, wenn die gesamte URL übereinstimmt (keine nachgestellten Zeichen)
  • Pfad : (Zeichenfolge), das Pfadmuster, das zum Abgleichen verwendet wird. Nützlich zum Erstellen verschachtelter Routen . Wir werden uns das später in einem der nächsten Artikel ansehen.
  • url : (string), der übereinstimmende Teil der URL. Nützlich zum Erstellen verschachtelter Links.

In der Home- Komponente haben wir also dieses Match- Objekt:

isExact ist wahr, weil die gesamte URL übereinstimmte, das params- Objekt leer ist, weil wir nichts übergeben haben, der Pfad und die URL- Schlüsselwerte gleich sind, um zu bestätigen, dass isExact wahr ist.

Schauen wir uns nun die TopicList-Ansicht an :

Nichts Neues , bis jetzt, gleiche Geschichte wie in der Home Ansicht , die zeigt , Pfad und die URL des TopicList .

Aber was ist, wenn wir uns TopicDetails ansehen ?

Okay, was haben wir hier?

isExact bleibt weiterhin wahr, da die gesamte URL abgeglichen wurde. Das params- Objekt bringt die topicId- Informationen, die an die Komponente übergeben wurden.

Achten Sie darauf, wie die topicId eine Variable ist.

Aber wo wird der Topic1- Wert angenommen?

Ganz einfach, Sie rufen es in TopicList-Links explizit auf .

Überprüfen Sie, wie wir die Übereinstimmung für die Themenliste verwendet haben , um deren URL zu ermitteln.

Dieser Link kann dynamisch sein . Später machen wir ein Beispiel, in dem Sie einen Link zu einem relativen Pfad erstellen, bei dem Sie vorher nicht wissen, ob es sich um Topic1 oder Topic3520 handelt .

Aber…

In welcher Situation ist isExact falsch?

Nun ... lassen Sie mich ein Beispiel geben:

In dieser Situation haben wir den / HelloWorldSection in die Browser-URL eingeführt.

Was passiert ist, dass der Router nicht den vollständigen Pfad zum HelloWorldSection kennt und Sie so weiterleitet , bis er den Weg kennt.

isExact zeigt falsch an und sagt Ihnen genau, dass die gesamte URL nicht übereinstimmt .

Dies ist sehr nützlich, wie Sie sehen werden, sobald Sie SPAs mit RRv4 durchführen!

Gerade unseren Ansatz zu beenden passen diese heraus überprüfen:

Wir haben die match.params.topicId verwendet , um unseren Themennamen auf dem Bildschirm zu drucken.

Dies ist eine der häufigsten Verwendungen für Übereinstimmungen .

Natürlich hat es eine Vielzahl von Anwendungen. Angenommen, wir müssen eine API mit diesen topicId- Informationen abrufen . ?

Ort

Das Standortobjekt gibt an , wo sich die App jetzt befindet, wohin sie gehen soll oder wo sie sich befand.

Es befindet sich auch in history.location, aber Sie sollten es nicht verwenden, da es veränderlich ist.

Ein Standortobjekt wird niemals mutiert, sodass Sie es in den Lifecycle-Hooks verwenden können, um zu bestimmen, wann die Navigation stattfindet. Dies ist sehr nützlich beim Abrufen von Daten oder bei DOM- Nebenwirkungen.

Lassen Sie uns console.log (Standort) innerhalb Home Ansicht :

Lassen Sie uns nicht viel tauchen und die einfache Funktionalität beibehalten.

Sie haben den Pfadnamen Schlüssel / Wert.

Sie können damit beispielsweise überprüfen, ob sich der Pfadname geändert hat:

Sie können oder dazu. Sie können einen history.push oder history.replace ausführen, wie wir später sehen werden.

Sie können ein benutzerdefiniertes Objekt erstellen und verwenden

  • history.push (locationX)

Sie können es auch weitergeben und Komponenten.

Dadurch wird verhindert, dass sie den tatsächlichen Standort im Status des Routers verwenden. Vielleicht möchten Sie eine Komponente dazu bringen, an einem anderen Ort als dem realen zu rendern?

Genug der Lage jetzt ...

Gehen wir zur Geschichte !

Geschichte

Mit dem Verlaufsobjekt können Sie den Browserverlauf in Ihren Ansichten oder Komponenten verwalten und verwalten.

  • Länge : (Anzahl), die Anzahl der Einträge im Verlaufsstapel
  • Aktion : (Zeichenfolge), die aktuelle Aktion (PUSH, REPLACE oder POP)
  • Ort : (Objekt), der aktuelle Ort
  • push (Pfad, [Status]) : (Funktion), schiebt einen neuen Eintrag in den Verlaufsstapel
  • replace (Pfad, [Status]) : (Funktion) ersetzt den aktuellen Eintrag im Verlaufsstapel
  • go (n) : (Funktion), bewegt den Zeiger im Verlaufsstapel um n Einträge
  • goBack () : (Funktion), entspricht go (-1)
  • goForward () : (Funktion,) entspricht go (1)
  • Block (Eingabeaufforderung) : (Funktion), verhindert die Navigation

So lassen Sie uns das console.log Geschichte Objekt in unserem Home Ansicht und sehen , was es zeigt:

Okay, genau das, was wir erwartet hatten.

Es sagt uns, dass wir mit einer PUSH- Aktion hier angekommen sind , dass die Länge des Objekts 40 beträgt (während Sie durch Ihren App- Verlauf navigieren, wächst er auf 50 und stoppt dort, wobei die älteren Einträge verworfen werden und die Größe jedes Mal beibehalten wird, wenn die App pusht ein weiterer Verlaufseintrag in das Objekt).

Es gibt uns die Standortinformationen .

Auch die Geschichte ist Gegenstand wandelbar . Daher wird empfohlen, auf den Speicherort über die Render- Requisiten von Route und nicht über history.location zuzugreifen .

Dies stellt sicher, dass Ihre Annahmen zu React in Lifecycle-Hooks korrekt sind.

Zum Beispiel:

Normalerweise können Sie damit den URL-Pfad des Browsers ändern.

Im folgenden Beispiel vermeiden wir und erstellen Sie eine Schaltfläche, die einen Verlaufs-Push ausführt:

Natürlich können Sie damit die URL-Änderung nach einigen Datenabrufen oder Nebenwirkungen auslösen.

Es ist bequem, es in der Mitte von JSX zu verwenden, wo Sie keine Komponenten aufrufen möchten. Sie können einfach zurückgeben eine Geschichte Push und auslösen Router zu aktualisieren den Browser - URL.

Zu guter Letzt

Ich denke, dass Sie zu diesem Zeitpunkt bereits eine gute Idee haben, wie Match , Ort und Verlauf verwendet werden .

Ich habe keine Änderungen an unserer anfänglichen Boilerplate vorgenommen. Sie können also gerne mit demselben Repo spielen, das in Teil 1 dieses Handbuchs enthalten ist.

05. Bibliographie

Für diesen Artikel habe ich die React Router-Dokumentation verwendet, die Sie hier finden.

Alle anderen Websites, die ich verwendet habe, sind entlang des Dokuments verlinkt, um Informationen hinzuzufügen oder Kontext zu dem bereitzustellen, was ich Ihnen zu erklären versucht habe.

Dieser Artikel ist Teil 2 einer Reihe mit dem Titel „Per Anhalter durch React Router v4“.

  • Teil I: Grok React Router in 20 Minuten
  • Teil III: rekursive Pfade bis ins Unendliche und darüber hinaus!
  • Teil IV: Routenkonfiguration, der versteckte Wert zum Definieren eines Routenkonfigurationsarrays

? Vielen Dank!