Warum sind verschachtelte Unterprogramme in React Router 4.3 nicht wirksam und wie können Sie dieses Problem lösen?

React Router 4.3 Detaillierte Erläuterung der verschachtelten Routing -Konfiguration und Problemuntersuchung

Beim Erstellen von Anwendungen mit React Router 4.3 ist die korrekte Konfiguration des verschachtelten Routings von entscheidender Bedeutung. In diesem Artikel wird ein gemeinsames Problem mit verschachteltem Routing -Misserfolg analysiert und wirksame Lösungen bereitstellen.

Nehmen wir an, Sie möchten einen Unterroutine /course/coursedetails /course/coursedetails/coursecatalog nisten, aber Sie erhalten einen 404 -Fehler beim Zugriff auf die Unterroutine. Dies wird normalerweise durch die übergeordnete Route verursacht, in der exact Attribut konfiguriert ist.

Lassen Sie uns eine typische Missverständnis analysieren:

Beispiel für die Fehlerkonfiguration:

Angenommen, die Konfiguration der übergeordneten Route in app.js lautet wie folgt:

 // app.js
<route exact path="/course/coursedetails" component="{CourseDetails}"></route>

Die Unterroutinekonfiguration in CourseDetails.js -Komponente lautet wie folgt:

 // cursedetails.js
<route path="/course/coursedetails/coursecatalog" component="{CourseCatalog}"></route>

Da die übergeordnete Route in app.js das exact Attribut verwendet, stimmt React Router den Pfad /course/coursedetails genau überein. React Router ist beim Zugriff auf /course/coursedetails/coursecatalog aufgrund der unvollständigen Übereinstimmung der übergeordneten Route nicht mit dem Unterroutine nach unten übereinstimmt, was zu einem 404 -Fehler führt.

Lösung:

Die Lösung ist einfach. Entfernen Sie einfach exact Attribut in der übergeordneten Route:

Beispiel für die korrekte Konfiguration:

Ändern Sie die übergeordnete Routenkonfiguration in app.js :

 // app.js
<route path="/course/coursedetails" component="{CourseDetails}"></route>

Die Unterroutinekonfiguration in CourseDetails.js bleibt unverändert:

 // cursedetails.js
<route path="/course/coursedetails/coursecatalog" component="{CourseCatalog}"></route>

Durch das Entfernen des exact Attributs passt React Router zunächst mit der übergeordneten Route /course/coursedetails überein und stimmt dann weiterhin mit der Kinderroute /course/coursedetails/coursecatalog überein, wodurch die Unterrouting-Komponente korrekt ist.

Ich hoffe, dass die obigen Analyse und Lösungen Ihnen helfen können, das Problem des verschachtelten Routing -Versagens im React -Router 4.3 zu lösen. Stellen Sie sicher, dass der Pfad für Fall konsistent ist, und überprüfen Sie, ob der Komponentenname mit der Routing -Konfiguration übereinstimmt.

Das obige ist der detaillierte Inhalt vonWarum sind verschachtelte Unterprogramme in React Router 4.3 nicht wirksam und wie können Sie dieses Problem lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!