Per Anhalter durch das Reagieren des Routers v4: Grok React Router in 20 Minuten

Hallo React Hitchhiker! Willst du eine Fahrt in React Router? Spring rein. Lass uns gehen!

Um die Philosophie hinter React Router zu verstehen, müssen wir wissen, was eine Single-Page-Anwendung (SPA) ist.

Was ist eine einseitige Anwendung?

Grundsätzlich handelt es sich um eine Webanwendung oder Website, die mit dem Benutzer interagiert, indem die aktuelle Seite dynamisch neu geschrieben wird, anstatt ganze neue Seiten von einem Server zu laden.

Warum ist das so gut?!

1. vermeidet eine Unterbrechung der Benutzererfahrung zwischen aufeinanderfolgenden Seiten

2. bewirkt, dass sich die Anwendung eher wie eine Desktop-Anwendung verhält

3. Alle Code-Ressourcen werden dynamisch geladen und bei Bedarf zur Seite hinzugefügt, normalerweise als Reaktion auf Benutzeraktionen

4. weil es kewl und kewl und extra ultra-wide-4K-level-of-kewl ist. ?

SPAs sind mittlerweile ein Industriestandard, und viele Unternehmen sind auf der Suche nach Programmierern für die Entwicklung ihrer Projekte.

Was ist React Router?

React Router ist ein Tool, mit dem Sie Routen verwalten können.

Da es sich um ein SPA handelt, müssen Sie die auf dem Bildschirm geladenen Inhalte auslösen können. React Router führt ein Konzept namens "Dynamic Routing" ein, das sich deutlich von dem gewohnten "Static Routing" unterscheidet.

Wenn Sie sich mit „statischem Routing“ beschäftigen, deklarieren Sie Ihre Routen als Teil der Initialisierung Ihrer App, bevor ein Rendering stattfindet (Rails, Express, Ember, Angular usw.).

"Dynamisches Routing" bedeutet, dass das Routing während des Renderns Ihrer App erfolgt und nicht in einer Konfiguration oder Konvention außerhalb einer laufenden App.

React Router v4 befürwortet und implementiert einen komponentenbasierten Routing-Ansatz.

Es bietet verschiedene Routing-Komponenten entsprechend den Anforderungen der Anwendung und Plattform.

In diesem speziellen Fall werden wir untersuchen   weil wir "dynamisches Routing" in einem "Web-App" -Kontext verwenden und die anderen für andere Umstände belassen möchten.

Wer hat den React Router erstellt?

Diese beiden erstaunlichen Menschen, Michael Jackson und Ryan Florence. Und sie verdienen jede Menge Klatschen! Zusammen begannen sie mit dem Reaktionstraining.

Korrigieren Sie mich heutzutage, wenn ich falsch liege, sie sind getrennte Wege gegangen:

Michael Jackson entwickelt das React Training weiter.

Ryan Florence hat Reach.Tech erstellt.

Hat React Router etwas mit Redux zu tun?

Nein, obwohl sie normalerweise zusammen auftreten.

Bist du sicher? Ja ? Ich bin mir sicher ?

Sie sind sowohl großartige als auch unverzichtbare Werkzeuge und da sie Komponenten höherer Ordnung sind (im Grunde genommen JavaScript-Funktionen, die eine Komponente übernehmen und eine neue zurückgeben), ist es üblich, sie zusammen „zusammengesetzt“ zu finden.

Setup, lassen Sie uns unsere Hände schmutzig machen

Um Sie durch diesen Prozess zu führen, verwenden wir die Create React App (CRA).

Am Ende haben Sie ein sauberes Boilerplate, um einfache Websites zu erstellen.

Wenn Sie zufällig nicht auf React oder Create React App zugreifen können, empfehle ich Ihnen, sich zuerst mit diesen zu befassen und dann mit einer Tasse Kaffee zurückzukehren.

Okay, für diejenigen, die bei mir standen: Nach der Installation von CRA müssen Sie das React-Router-Paket installieren.

Wenn Sie npm verwenden, öffnen Sie einfach Ihr Terminal, gehen Sie zu Ihrem CRA-Ordner und geben Sie Folgendes ein:

npm i -S react-router-dom

oder

yarn add react-router-dom- -wenn Sie Garn als Paketmanager verwenden.

Nur um Ihre package.json zu überprüfenund stellen Sie sicher, dass alles in Ordnung ist, hier ist meine:

Wie Sie sehen können, haben wir an dieser Stelle React-Router-Dom als Abhängigkeit.

Fertig, npm oder Garn beginnen und…

Knall! Wir reiten Ma!

Die App, die wir bauen

Lassen Sie uns eine einfache persönliche Website mit einer Navigationsleiste erstellen, mit der der Benutzer zwischen Inhalten wechseln kann. Unsere Website wird drei Hauptabschnitte mit den Namen " Startseite" , " Info" und " Themen" enthalten .

Die NavBar ist eine allgegenwärtige Komponente, während Home , Info und Themen unten entsprechend den ausgewählten Routen gerendert werden.

Sehen Sie die Browser-URL: localhost: 3000 / home im folgenden Screenshot?

Dies bedeutet, dass die Home- Route ausgelöst und die Home- Ansicht gerendert wird.

Dies wird unser Endergebnis sein:

Und das ...?, Das ist eine Website?

? Ja ist es!

Ein nackter! Versuchen Sie einfach, sich nicht auf andere Komplexitäten wie Styling usw. einzulassen! Ich möchte nicht, dass Sie von etwas anderem abgelenkt werden, als zu wissen, wie einfach es ist, React Router v4 zu implementieren .

Nachdem Sie sich von dem Schock erholt haben, machen wir den nächsten Schritt und sehen uns meine Datei /src/index.js an.

/src/index.js

index.js ist die erste Datei, die von CRA geladen wird, dem Initialisierungspunkt von allem in Ihrer App.

Werfen wir einen Blick auf das, was ich getan habe:

Was machen wir hier?

  • Wir importieren die Komponente aus der von uns installierten Abhängigkeit und die Angabe, dass wir sie aufrufen werden von diesem Punkt an:

import { BrowserRouter as Router } from ‘react-router-dom’;

  • Wir importieren a Von mir erstellte Komponente mit den Routen, die wir auf unserer Website verwenden werden - machen Sie sich jetzt mit dieser Komponente keine Sorgen:

import { Routes } from ‘./routes’;

Das Die Komponente ersetzt die Standard-CRA  Komponente. Es ist im Grunde das gleiche - ich habe es gerade genannt weil ich es für sinnvoll halte, den Code aussagekräftiger und lesbarer zu machen.

Sie laden keine eindeutige App mehr, sondern eine Routenkomponente , die die Routen verarbeitet und das Mounten und Rendern der Komponenten auslöst, die innerhalb jeder Route geladen werden sollen.

  • Wir umarmen uns mit dem Komponente.

In der Tat, arbeitet als Komponente höherer Ordnung, die ihre Kinder in Zukunft nur kennt und in größerem Umfang mit ihnen interagiert, unabhängig davon, wer und wie viele sie sind.

Sie müssen sich keine Gedanken darüber machen, wie es funktioniert, um es zu verwenden. Dies ist eine viel tiefere und fortgeschrittenere Angelegenheit.

Stellen Sie einfach sicher, dass Sie verstehendass React.DOM keine einfache App mehr lädt . Es wird die App geladen, die von einer Komponente umfasst wird Router, die in einer höheren Instanz oder einem höheren Bereich mit ihr und dem Browser interagieren kann DOM.

Com nente

Was macht route.js also im Grunde ?

Es beginnt mit dem Import von React und einigen Komponenten, die wir später betrachten werden. Stellen Sie sich diese als einfache zustandslose Komponenten vor: Home , About , TopicList , TopicDetail , NavBar und NoMatch .

Außerdem werden drei Komponenten aus dem React-Router-Dom- Paket importiert , die aufgerufen werden müssen:, und .

Nach dem Import exportieren wir die zustandslosen Komponentenrouten, die die NavBar(die immer auf dem Bildschirm angezeigt werden) und a aufrufen Komponente.

Was macht dieser Typ?

Diese Komponente rendert im Grunde das erste Kind oder das entspricht dem Speicherort des Browsers.

Es beginnt solche Dinge zu testen: „ist die Browser-URL in diesem Pfad? Nein? In Ordnung." Nächste Route. „Befindet sich die Browser-URL in diesem anderen Routenpfad? Nein."

Nächste Route. "Oh, ich habe es! In diesem Fall lösen wir das Rendern der Komponente aus und beenden die Überprüfung jetzt (die anderen Routen unten interessieren mich nicht…). “

Wenn dies zufällig passiert:

Die zweite Route wird niemals ausgelöst, da der Schalter vor Erreichen abspringt. Er geht nur auf einen Kaffee… (und ich auch !!!? Zurück!)

Innerhalb wir definieren jeden .

Jeder teilt dies dem Browser mit:

„Hey Browser DOM! Wenn wählt mich aus, weil Ihr Standort (genau) dieser ist. Bitte rendern Sie die folgende Komponente. “

Oder in anderen Fällen wie dem folgenden heißt es:

„Hey, Browser, wenn überhaupt wählte mich, weil der Ort / Topics / "etwas" ist. Sicher wird es herausfinden, wer das ist : topicId (variable) Sache, die der Benutzer uns bittet, sie abzugleichen und entsprechend weiterzuleiten . “

Okay, alle zusammen. weil Hat dieses Standardverhalten das Überprüfen jeder Route, müssen wir einen Fallback bereitstellen, falls es mit nichts übereinstimmt:

Diese letzte Route rendert einfach eine Standardseite, die besagt, dass keine Route gefunden wurde, eine Art HTTP 404-Fehler.

Denken Sie daran, dass es sich hier um ein SPA und um „Dynamisches Routing“ handelt. Dies ist also eine Simulation, als ob wir Routen zu einem Server fordern würden. Eigentlich sind wir nicht!

Wir wissen einfach nicht, was wir rendern sollen, wenn der Benutzer beispielsweise etwas einfügt, das nicht mit der URL übereinstimmt: // localhost: 3000 / HelloWorld .

Da diese Route nicht definiert wurde, stellen wir eine NoMatch- Komponente bereit , um sie über das Nichtvorhandensein der Route zu informieren.

liegt da, wenn der Benutzer versucht, die URL ohne Route zu laden // localhost: 3000 / , würde er ein NoMatch erhalten, da keine Route dafür definiert ist. Der beste Weg, um damit umzugehen, ist die Verwendung  und schieben Sie den Benutzer auf die Route von / Home, die standardmäßig unser erster Bildschirm der App ist.

Warum ist das notwendig?

Wiederum, weil der Benutzer die Anwendung normalerweise durch Eingabe der allgemeinen URL und ohne die URL startet Die erste gerenderte Komponente wäre . Wir wollen das nicht, wir wollen, dass der Benutzer zum weitergeleitet wird Komponente.

Ansichten und / oder Komponenten

An dieser Stelle in unserem Handbuch möchte ich ein wenig innehalten, um eine Ansicht von einer Komponente zu unterscheiden. Dies ist nicht die Essenz dieses Handbuchs, wird aber Sinn machen, nachdem ich Ihnen die Ordnerstruktur meiner CRA gezeigt habe .

Wenn wir „in Reaktion denken“ und anfangen, eine App zu erstellen, die zu wachsen beginnt, hören wir manchmal auf, weil wir das Gefühl haben, dass die Dinge nicht am richtigen Ort sind.

Dies bedeutet, dass wir diesen Dingen Namen geben und sie in verschiedenen „Schubladen“ oder „Ordnern“ getrennt halten müssen.

Ansichten und Komponenten sind Dinge, die auf dem Bildschirm gemalt werden. Was unterscheidet also eine Sache von der anderen?

Und sind Ansichten keine Komponenten? Und Komponenten sind keine Ansichten?

Nun, in Bezug auf die Codierungssprache sind eine Ansicht und eine Komponente sicherlich Funktionen oder Klassen - zustandslose Komponenten oder zustandsbehaftete Komponenten, wie wir sie in React lingo nennen.

Was unterscheidet sie also?

Nun, eine Ansicht hat eine Route. In dieser Ansicht können Sie viele Komponenten rendern.

Eine Komponente ist normalerweise eine Abstraktion, die in verschiedenen Ansichten häufig aufgerufen werden kann. Es kann eine Schaltfläche, ein Formular, ein Diagramm sein. Es kann sogar eine komplexere Sache sein, während eine Ansicht einzigartig ist und eine Route hat.

Dies ist ein sehr einfaches Konzept, das am Anfang verstanden werden muss, sobald wir eine App erstellen, die so klein wie eine persönliche Homepage ist.

Werfen wir einen Blick auf meine CRA-Ordnerstruktur:

Wie Sie sehen, halte ich - und 99% der Welt - Orangen und Birnen gerne in verschiedenen Körben. Und du auch! Ich habe Vertrauen in Sie! Ich vertraue dir!

Es gibt viele Muster, wie man diese Dinge organisiert, und viele Diskussionen beginnen, wenn wir weitere Pakete wie Redux einführen, die die Architektur der App ein wenig verändern, oder wenn wir Dashboards, Widgets und Radfahren auf dem Bildschirm malen möchten Schweine oder mehr komisches Zeug…

Um Konzepte zu unterscheiden, sollten Sie sich Ansichten und Komponenten genau ansehen.

Home , About , TopicList und NoMatch sind Ansichten. Sie haben ihre eigenen richtigen Routen, die sie auslösen.

NavBar ist eine allgegenwärtige Komponente, die immer aufgerufen wird. Es hat keine Route.

TopicDetails ist eine Komponente, die Themeninformationen anzeigt, wenn die Route TopicList /: topicId ausgelöst wird. Es ist eine wiederverwendbare Komponente, die an andere Orte importiert und überarbeitet oder erweitert werden kann. Es gibt keine bestimmte Route.

Das Zuhause / Über Ansichten

Im Home-Ordner habe ich eine index.js und eine Home.js- Datei.

Es ist eine gute Praxis, eine index.js zum Exportieren der anderen Dateien zu haben. Vertrau mir einfach oder bring etwas Wein mit, denn das wird ein langes Gespräch?

… Oh, lass uns einfach den Wein trinken und wir werden später reden! ?

Dies ist eine einfache Ansicht, die nur den Titel exportiert. Die Info- Ansicht entspricht dieser.

Schauen wir uns jetzt die TopicList-Ansicht an, weil sie etwas anders ist.

TopicList- und TopicDetail-Ansichten

So TopicList Ansicht hat dieses Detail von verschiedenen Routen Handhabung. Denken Sie daran, dass / Topic /: topicId das weiterleitet erzählte lassen TopicDetail Griff?

Hier sind wir damit.

TopicList erhält {match} als Requisite. Lassen Sie sich von der Destrukturierungsfunktion nicht erschrecken. Wir könnten einfach Requisiten erhalten und props.match anrufen . Auf diese Weise zerstören all die coolen Kids heutzutage Requisiten, um die Lesbarkeit und den Reaktionsfluss zu verbessern. Ich mag es auch sehr! Dies ist so, als würden Sie eine Box mit Ihrem Handy im Inneren abholen oder das Handy direkt abholen. Tatsächlich wurde es in der Box aufbewahrt, aber in diesem Moment müssen Sie nur Ihre E-Mails abrufen? Also lass die Box bleiben, wo sie ist! Bring es nicht mit zur Arbeit!

Wie auch immer, konzentrieren wir uns weiterhin auf Code.

In dieser Datei importieren wir eine Komponente aus dem React Router mit dem Namen {Link}, weil wir Links erstellen möchten.

Wir erhalten eine Übereinstimmung von der Route, die wir ausgewählt haben, als wir auf Themen geklickt haben, und wir rendern eine ungeordnete Liste mit drei Optionen: Thema1 , Thema2 und Thema3 .

Wenn der Benutzer auf dem Bildschirm Topic1 Link auswählt , wird dieschiebt die Browser-URL auf diesen Pfad / Topics / Topic1 .

Was passiert als nächstes? und Erkennen Sie, dass sich die URL geändert hat, und überprüfen Sie die Informationen, um festzustellen, welche Route ausgelöst werden muss. Sie stellen also fest, dass die ausgelöste Route jetzt die für / Topics /: topicId ist und das TopicDetail- Rendering auslöst . TopicDetail rendert Thema1 Details.

TopicDetail empfängt eine Übereinstimmung vom Router und rendert die topicId unter match.params.topicId .

Die NavBar-Komponente

Die NavBar- Komponente spielt hier eine besondere Rolle, da sie allgegenwärtig ist.

Seine Funktion besteht darin, dem Benutzer das Navigieren auf der Website und das Anzeigen der verfügbaren Abschnitte (Routen) zu ermöglichen.

Wie Sie am Anfang gesehen haben, ist es drinnen aber draußen Daher wird jede Ansicht immer mit NavBar oben erstellt.

Wie Sie sehen können, ist seine Rolle grundlegend. Es liefert nur und erzählt Fragen das Gewählte auslösen und auf dem Bildschirm rendern.

Zu guter Letzt

Ich denke, dass Sie zu diesem Zeitpunkt wahrscheinlich ein grundlegendes Verständnis der Funktionsweise von React Router haben und für die Erstellung einer einfachen Website verwendet werden können.

Wenn Sie den Code überprüfen oder testen möchten, können Sie mein Repo abrufen, das auf GitHub verfügbar ist.

Literaturverzeichnis

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 1 einer Reihe mit dem Titel „Per Anhalter durch React Router v4“. Die Teile 2–4 kommen diese Woche zum freeCodeCamp!

  • Teil II: [Spiel, Ort, Geschichte] - deine besten Freunde!
  • Teil III: rekursive Pfade bis ins Unendliche und darüber hinaus!
  • Teil IV: Routenkonfiguration, der versteckte Wert zum Definieren eines Routenkonfigurationsarrays

Vielen Dank!