Verschachtelte Routen und Routenparameter
Lernen Sie, wie eine übergeordnete Route untergeordnete Ansichten rendert und wie Routenparameter (z. B. /products/42) IDs an Komponenten übergeben.
Verschachtelte Routen und Routenparameter ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum verschachtelte Routen und Parameter?
Ziel: Verstehen Sie verschachtelte Routen (übergeordnete Seiten, die untergeordnete Ansichten rendern) und Routenparameter (variable Teile der URL wie /products/42).
Die Idee von Parent und Outlet
Ein übergeordneter Pfad, zum Beispiel /products, rendert das Layout und ein outlet. Untergeordnete Pfade, zum Beispiel /products/:id, füllen dieses outlet mit spezifischen Inhalten.
Was sind Parameter?
Routenparameter erfassen Werte aus der URL, etwa :id. Komponenten lesen den Parameter aus, um den passenden Datensatz zu laden oder anzuzeigen.
Demo: Verschachtelung und Parameter
Hash-basierte Demo: Der übergeordnete Pfad /products zeigt eine Liste. Beim Auswählen eines Elements wird zu /products/ID navigiert und die untergeordnete Ansicht darin gerendert.
<div id="root"></div>
Parameter auslesen und Links erstellen
Parameter auslesen: Analysieren Sie die URL (oder verwenden Sie einen Router-Hook), um id zu erhalten und Daten zu laden. Verlinken: Erstellen Sie aus Listen Pfade wie /products/ID.
Tipps und Fallstricke
Tipps:
- Halten Sie das übergeordnete Layout klein und rendern Sie untergeordnete Inhalte in einem outlet-Bereich.
- Validieren Sie Parameter, bevor Sie sie verwenden.
- Behandeln Sie nicht gefundene IDs auf angemessene Weise.
Zweck eines Routenparameters
Zusammenfassung
Zusammenfassung: Übergeordnete Routen stellen das Layout bereit, untergeordnete Routen werden in einem outlet gerendert. Verwenden Sie Routenparameter, um IDs aus der URL zu erfassen und den richtigen Datensatz anzuzeigen.
Häufig gestellte Fragen
Ist die Lektion „Verschachtelte Routen und Routenparameter“ kostenlos?
Ja — der vollständige Text von „Verschachtelte Routen und Routenparameter“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Verschachtelte Routen und Routenparameter“?
Lernen Sie, wie eine übergeordnete Route untergeordnete Ansichten rendert und wie Routenparameter (z. B. /products/42) IDs an Komponenten übergeben. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Verschachtelte Routen und Routenparameter“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Konzepte des clientseitigen Routings
- Verschachtelte Routen und Routenparameter
- Navigationslinks und aktive Zustände