Maison  >  Article  >  interface Web  >  Comment créer des routes imbriquées dans React Router v4/v5 ?

Comment créer des routes imbriquées dans React Router v4/v5 ?

DDD
DDDoriginal
2024-11-01 11:10:30338parcourir

How to Create Nested Routes in React Router v4/v5?

Routes imbriquées avec React Router v4/v5

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 et composants.

Exemple

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.

Considérations

Dans React Router v4, vous n'imbriquez pas composants. Au lieu de cela, vous les placez dans un autre . Par exemple :

<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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn