Client-seitiges Routing in React Router
In dieser Lektion betrachten wir eine wichtige Komponente von Single-Page-Anwendungen (SPA) - das Client-seitige Routing. Ein solches Routing ermöglicht es uns, die URL im Browser zu aktualisieren, ohne dass zusätzliche Anfragen für das Dokument vom Server notwendig sind.
Starten Sie die Anwendung, die wir in der
letzten Lektion erstellt haben. Öffnen Sie die Entwicklerkonsole und
darin den Tab 'Netzwerk' (Network für Chrome).
Nach jedem Klick auf unsere Links
sehen wir jedes Mal eine Anfrage für document. Das bedeutet,
dass wir jedes Mal den Server bitten, uns das document nachzuladen.
Lassen Sie uns nun die Vorteile von
React Router nutzen, um solche Anfragen loszuwerden. Dazu öffnen wir root.jsx
unserer Anwendung und ersetzen das a-Tag
im Markup durch die Link-Komponente. Zuerst
fügen wir den Import hinzu:
import { Outlet, Link } from 'react-router-dom';
Jetzt ersetzen wir die a-Tags mit dem Attribut
href. Anstelle des Codeausschnitts:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Haben wir nun den folgenden Code:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Wir öffnen erneut den Tab 'Netzwerk' in der
Entwicklerkonsole, setzen in der Adressleiste
den Root-Pfad und aktualisieren die Seite. Jetzt klicken wir auf die Links
und sehen, dass das document nur einmal bei der anfänglichen Ladeanfrage
abgerufen wurde und bei den nachfolgenden Klicks keine Anfrage mehr an
den Server gesendet wird.
Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Nutzen Sie die Materialien der Lektion, um darin Client-seitiges Routing zu implementieren, indem Sie Ihre Links wie in der Lektion beschrieben umändern.
