ReactJS - Routing: Ein Anfängerleitfaden zur Navigation in Ihrer React-App

Hallo da draußen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise durch die Welt des React-Routings. Als Ihr freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um Sie durch dieses essenzielle Konzept zu führen, das Ihre React-Anwendungen auf das nächste Level bringt. Also, schnallen Sie sich an und tauchen wir ein!

Was ist Routing in React?

Bevor wir loslegen, stellen wir uns vor, Sie bauen ein Haus. Jedes Zimmer in Ihrem Haus ist wie eine andere Seite in Ihrer Webanwendung. Wär es nicht großartig, wenn Sie zwischen diesen Zimmern wechseln könnten, ohne das ganze Haus jedes Mal neu bauen zu müssen? Genau das macht Routing in React!

Routing ermöglicht es uns, eine Einzelseitenanwendung mit mehreren Ansichten zu erstellen, die den Benutzern die Möglichkeit gibt, zwischen verschiedenen Komponenten (oder "Seiten") zu navigieren, ohne die gesamte Anwendung neu zu laden. Es ist wie ein magisches Tor, das Sie sofort in jedes Zimmer Ihres Hauses führen kann!

Installation von React Router

Um mit Routing in React zu beginnen, müssen wir eine beliebte Bibliothek namens React Router installieren. Keine Sorge; das ist so einfach wie ein Kuchen!

Öffnen Sie Ihr Terminal, navigieren Sie zu Ihrem React-Projektkatalog und führen Sie den folgenden Befehl aus:

npm install react-router-dom

Dieser Befehlweist npm (Node Package Manager) an, die React Router-Bibliothek für uns zu installieren. Wenn das erledigt ist, sind wir bereit zum Routen!

React Router: Die Grundlagen

Nun, da wir React Router installiert haben, lernen wir, wie man es verwendet. Wir beginnen mit einem einfachen Beispiel und bauen unser Wissen schrittweise auf.

Schritt 1: Notwendige Komponenten importieren

Zuerst müssen wir die erforderlichen Komponenten von React Router importieren. Fügen Sie diese Zeilen oben in Ihrer Hauptdatei App.js ein:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

Schritt 2: Den Router einrichten

Als nächstes werden wir unsere gesamte Anwendung mit dem Router-Komponenten umschließen. Dies tells React, dass wir Routing in unserer App aktivieren möchten:

function App() {
return (
<Router>
{/* Ihr App-Inhalt kommt hier hin */}
</Router>
);
}

Schritt 3: Routen definieren

Nun definieren wir einige Routen. Wir erstellen drei einfache Komponenten: Home, About und Contact.

function Home() {
return <h2>Willkommen auf unserer Startseite!</h2>;
}

function About() {
return <h2>Erhalten Sie mehr Informationen über uns auf dieser Über-uns-Seite.</h2>;
}

function Contact() {
return <h2>Kontaktieren Sie uns über diese Kontaktseite.</h2>;
}

Um Routen für diese Komponenten einzurichten, verwenden wir die Route-Komponente:

function App() {
return (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Hier ist, was passiert:

• Das Schlüsselwort exact stellt sicher, dass die Home-Komponente nur angezeigt wird, wenn der Pfad genau "/" ist.
• Jede Route-Komponente nimmt ein path-Prop (die URL) und ein component-Prop (die Komponente, die an diesem Pfad angezeigt werden soll) an.

Schritt 4: Navigation hinzufügen

Um den Benutzern die Navigation zwischen diesen Routen zu ermöglichen, verwenden wir die Link-Komponente:

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">Über uns</Link>
</li>
<li>
<Link to="/contact">Kontakt</Link>
</li>
</ul>
</nav>

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Die Link-Komponente ist wie ein superangereicherter <a>-Tag. Sie ermöglicht die Navigation ohne einen vollständigen 页面 Neuladen.

Geschachteltes Routing

Nun, da wir die Grundlagen draufhaben, steigen wir mit geschachteltem Routing eine Stufe höher. Stellen Sie sich vor, Sie haben eine "Produkte"-Seite und möchten innerhalb dieser verschiedene Produktkategorien anzeigen.

Hier ist, wie wir geschachteltes Routing einrichten können:

function Products() {
return (
<div>
<h2>Unsere Produkte</h2>
<ul>
<li>
<Link to="/products/electronics">Elektronik</Link>
</li>
<li>
<Link to="/products/books">Bücher</Link>
</li>
</ul>

<Route path="/products/electronics" component={Electronics} />
<Route path="/products/books" component={Books} />
</div>
);
}

function Electronics() {
return <h3>Schauen Sie sich unsere neuesten Geräte an!</h3>;
}

function Books() {
return <h3>Entdecken Sie unsere umfassende Buchsammlung!</h3>;
}

In diesem Beispiel enthält die Products-Komponente ihre eigenen Routen. Wenn Sie zu "/products/electronics" navigieren, sehen Sie sowohl die Products- als auch die Electronics-Komponente.

Vorteile von React Router

React Router bietet mehrere Vorteile, die es zu einer beliebten Wahl für die Routenverwaltung in React-Anwendungen machen. Lassen Sie uns diese aufschlüsseln:

Vorteil	Beschreibung
Dynamisches Routing	Routen sind Teil der Composition Ihrer App, nicht in einer Konfigurationsdatei definiert.
Geschachteltes Routing	Erstellen Sie komplexe UIs mit geschachtelten Routenstrukturen einfach.
Kontrolle über den Verlauf	Bietet feingranulare Kontrolle über den Verlauf des Browsers.
Code-Splitting	Ermöglicht einfaches Code-Splitting, verbessert die Leistung der App.
Deklaratives Routing	Definieren Sie Ihre Routen als React-Komponenten, was intuitiver und einfacher zu verwalten ist.

Fazit

Glückwunsch! Sie haben die ersten Schritte in die Welt des React-Routings gewagt. Wir haben Installation, grundlegendes Routing, geschachteltes Routing und die Vorteile der Verwendung von React Router behandelt. Denken Sie daran, dass Routing wie jede andere Fähigkeit einfacher wird, je öfter Sie es praktizieren. Also, fürchten Sie sich nicht, experimentieren Sie und bauen Sie Ihre eigenen gerouteten Anwendungen.

Als wir uns dem Ende nähern, erinnere ich mich an einen Schüler, der mir einmal sagte: "React-Routing fühlte sich an wie das Navigieren durch einen Irrgarten mit verbundenen Augen." Aber nach einiger Übung kam derselbe Schüler zurück und sagte: "Jetzt ist es so, als hätte ich eine Karte und eine Taschenlampe!" Ich hoffe, dass dieses Tutorial Ihnen diese Karte und Taschenlampe für Ihre React-Routing-Reise gegeben hat.

Weiter codieren, weiter lernen und vor allem: Spaß daran haben, großartige React-Anwendungen zu bauen!

Credits: Image by storyset