Maison > interface Web > js tutoriel > le corps du texte

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

DDD
Libérer: 2024-11-01 11:10:30
original
340 Les gens l'ont consulté

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} />
Copier après la connexion

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} />
Copier après la connexion
Copier après la connexion

Devrait devenir :

<Route path="/topics" component={Topics} />
Copier après la connexion
Copier après la connexion

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>
);
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal