Lernen Sie React Router in 5 Minuten - Ein Anfänger-Tutorial

Manchmal haben Sie nur 5 Minuten Zeit. Anstatt es in sozialen Medien zu verschwenden, erhalten wir eine 5-minütige Einführung in React-Router! In diesem Tutorial lernen wir die Grundlagen des Routings in React kennen, indem wir die Navigation für eine Scrimba-Strickerei-Website erstellen. Es ist nicht real, aber vielleicht eines Tages ...;)

Wenn Sie eine angemessene Einführung in dieses Thema wünschen, können Sie sich der Warteliste für meinen bevorstehenden React-Kurs für Fortgeschrittene anschließen. Wenn Sie noch Anfänger sind, lesen Sie meinen Einführungskurs zu React.

Was ist eigentlich React-Router?

Viele moderne Websites bestehen tatsächlich aus einer einzelnen Seite. Sie sehen nur wie mehrere Seiten aus, da sie Komponenten enthalten, die wie separate Seiten gerendert werden. Diese werden in der Regel bezeichnet als SPAs - s Ingle , p Alter ein pplikationen. Im Kern rendert React Router bestimmte Komponenten abhängig von der in der URL verwendeten Route ( /für die Startseite, /aboutfür die Info-Seite usw.) unter bestimmten Bedingungen .

Zum Beispiel können wir React Router verwenden, um www.knit-with-scrimba.com/ mit www.knit-with-scrimba.com/about oder www.knit-with-scrimba.com/shop zu verbinden

Hört sich toll an - wie benutze ich es?

Um React Router verwenden zu können, müssen Sie es zuerst mit NPM installieren:

npm install react-router-dom 

Alternativ können Sie diesen Spielplatz auch in Scrimba verwenden, auf dem der vollständige Code bereits geschrieben ist.

Sie müssen BrowserRouter, Route und Switch aus dem react-router-domPaket importieren :

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

In meinem Beispiel verknüpfe ich die Zielseite mit zwei anderen "Seiten" (die eigentlich nur Komponenten sind), die als Shopund bezeichnet werden About.

Zunächst müssen Sie Ihre App für die Arbeit mit React Router einrichten. Alles, was gerendert wird, muss in das Element aufgenommen werden. Wickeln Sie Ihre App also zuerst in diese ein. Es ist die Komponente, die die gesamte Logik der Anzeige verschiedener Komponenten ausführt, die Sie bereitstellen.

// index.js ReactDOM.render(   , document.getElementById('root') ) 

Fügen Sie als Nächstes in Ihrer App-Komponente das SwitchElement hinzu (offene und schließende Tags). Diese stellen sicher, dass jeweils nur eine Komponente gerendert wird. Wenn wir dies nicht verwenden, können wir standardmäßig die ErrorKomponente verwenden, die wir später schreiben werden.

function App() { return (     ) } 

Es ist jetzt Zeit, Ihre Tags hinzuzufügen . Dies sind die Verknüpfungen zwischen den Komponenten und sollten innerhalb der Tags platziert werden.

Um den Tags mitzuteilen, welche Komponente geladen werden soll, fügen Sie einfach ein pathAttribut und den Namen der Komponente hinzu, die Sie mit dem componentAttribut laden möchten .

Bei vielen Homepage-URLs handelt es sich um den Site-Namen, gefolgt von "/"beispielsweise www.knit-with-scrimba.com/ . In diesem Fall fügen wir exactdem Route-Tag hinzu. Dies liegt daran, dass die anderen URLs ebenfalls "/" enthalten. Wenn wir der App also nicht mitteilen, dass sie nur suchen muss /, wird die erste geladen, die der Route entspricht, und es wird ein ziemlich kniffliger Fehler behoben.

function App() { return (        ) } 

Importieren Sie nun die Komponenten in die App. Möglicherweise möchten Sie sie in einem separaten Ordner "Komponenten" haben, um den Code sauber und lesbar zu halten.

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

Auf diese zuvor erwähnte Fehlermeldung wird geladen, wenn ein Benutzer eine falsche URL eingibt. Dies ist wie ein normales Tag, jedoch ohne Pfad. Die Fehlerkomponente enthält

Oops! Page not found!

. Vergessen Sie nicht, es in die App zu importieren.

function App() { return (         ) } 

Bisher kann unsere Website nur durch Eingabe der URLs navigiert werden. Um der Site anklickbare Links hinzuzufügen, verwenden wir das LinkElement von React Router und richten eine neue NavbarKomponente ein. Vergessen Sie nicht, die neue Komponente erneut in die App zu importieren.

Fügen Sie nun Linkfür jede Komponente in der App ein hinzu und to="URL"verknüpfen Sie sie.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

Ihre Website verfügt jetzt über anklickbare Links, mit denen Sie durch Ihre einseitige App navigieren können!

Fazit

Da haben wir es also. Wenn Sie einfach in einer React-App navigieren möchten, vergessen Sie die Ankertags und fügen Sie React Router hinzu. Es ist sauber, organisiert und erleichtert das Hinzufügen und Löschen von Seiten erheblich.

Um mehr über React Hooks und andere großartige Funktionen von React zu erfahren, können Sie sich auf die Warteliste für meinen bevorstehenden fortgeschrittenen React-Kurs setzen.

Oder wenn Sie etwas Anfängerfreundlicheres suchen, können Sie meinen Einführungskurs zu React lesen.

Viel Spaß beim Codieren;)