Les routes imbriquées vous permettent de créer une structure hiérarchique pour la navigation au sein de votre application React. Dans React Router v4 et v5, vous pouvez y parvenir en utilisant l'option
Considérez l'exemple suivant, dans lequel nous souhaitons diviser notre application en zones frontend et admin.
<Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} />
Dans l'exemple ci-dessus, le premier < ;Correspondance> definition définit les routes frontend, tandis que la seconde définit les routes admin. Chaque route est associée à un composant qui doit être rendu lors de l'accès à cette route.
Dans React Router v4, vous n'imbriquez pas
<Route path="/topics" component={Topics} />
Devrait devenir :
<Route path="/topics" component={Topics} />
Et le composant Thèmes serait défini comme suit :
const Topics = ({ match }) => ( <div> <h2>Topics</h2> <Link to={`${match.url}/exampleTopicId`}> Example topic </Link> <Route path={`${match.path}/:topicId`} component={Topic} /> </div> );
Cette structure permet plus de flexibilité et contrôlez le routage de votre application.
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!