Comment créer des routes imbriquées dans 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!