Pourquoi les sous-programmes imbriqués ne sont-ils pas efficaces dans le routeur 4.3 React et comment résoudre ce problème?

Routeur React 4.3 Explication détaillée de la configuration du routage imbriqué et de l'enquête problématique

Lors de la création d'applications à l'aide du routeur React 4.3, la configuration correcte du routage imbriqué est cruciale. Cet article analysera un problème de défaillance de routage imbriqué commun et fournira des solutions efficaces.

Supposons que vous souhaitiez nicher un sous-programme /course/coursedetails / corsedEtails /course/coursedetails/coursecatalog , mais vous obtenez une erreur 404 lorsque vous accédez au sous-programme. Ceci est généralement causé par la route parentale ayant exact configuré.

Analysons une erreur de configuration typique:

Exemple de configuration d'erreur:

Supposons que la configuration de l'itinéraire parent dans app.js est la suivante:

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

La configuration du sous-programme à l'intérieur CourseDetails.js est la suivante:

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

Étant donné que l'itinéraire parent dans app.js utilise l'attribut exact , React Router correspondra avec précision sur le chemin /course/coursedetails . Lorsque vous accédez /course/coursedetails/coursecatalog , React Router ne continue pas à correspondre à la sous-programme vers le bas en raison de la correspondance incomplète de l'itinéraire parent, entraînant une erreur de 404.

Solution:

La solution est simple, supprimez simplement exact dans l'itinéraire parent:

Exemple de configuration correcte:

Modifiez la configuration de l'itinéraire parent dans app.js :

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

La configuration du sous-programme dans CourseDetails.js reste inchangée:

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

En supprimant l'attribut exact , React Router correspondra d'abord à l'itinéraire des parents /course/coursedetails , puis continuera à correspondre à son itinéraire /course/coursedetails/coursecatalog , rendant ainsi correctement le composant de sous-routage.

J'espère que l'analyse et les solutions ci-dessus pourront vous aider à résoudre le problème de l'échec du routage imbriqué dans le routeur React 4.3. Assurez-vous que le chemin est cohérent et vérifiez si le nom du composant correspond à la configuration de routage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!