Comment imbriquer efficacement les routes dans React Router v4 ou v5 ?

Routes imbriquées avec React Router v4 / v5

Lorsque vous travaillez avec React Router, il est souvent nécessaire de créer des routes imbriquées pour organiser la structure de navigation de votre application. Cela vous permet de regrouper les routes associées et de créer un système de routage hiérarchique.

Problème :

Les utilisateurs peuvent rencontrer des difficultés à imbriquer les routes dans React Router v4 ou v5. Un défi courant consiste à déterminer comment diviser une application en sections distinctes, telles qu'une zone d'interface et une zone d'administration, et à garantir que les routes enfants sont affichées dans les composants appropriés.

Réponse :

Dans React Router v4 et v5, l'imbrication n'est pas réalisée en imbriquant composants. Au lieu de cela, les itinéraires sont imbriqués dans d’autres composants. Cette approche diffère de la syntaxe d'imbrication utilisée dans les versions précédentes de React Router.

Par exemple, considérons la configuration de route suivante :

<code class="jsx"><Route path='/' component={Frontpage}>
  <Route path='/home' component={HomePage} />
  <Route path='/about' component={AboutPage} />
</Route>
<Route path='/admin' component={Backend}>
  <Route path='/home' component={Dashboard} />
  <Route path='/users' component={UserPage} />
</Route>
<Route component={NotFoundPage} /></code>

Dans cette configuration, le composant Frontpage sert de parent pour les routes frontend, et le composant Backend est le composant parent pour les routes d'administration. Cela vous permet de créer des mises en page et des styles distincts pour chaque section de votre application.

Par exemple, l'itinéraire Sujets précédemment défini comme imbriqué dans peut être réécrit comme suit :

<code class="jsx"><Route path='/topics' component={Topics} /></code>

Et le composant Topics restituerait alors ses routes enfants comme suit :

<code class="jsx">const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
);</code>

En suivant cette approche, vous pouvez efficacement imbriquer les routes dans React Router v4 ou v5. Cela vous permet de créer des structures de navigation claires et organisées pour 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!