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

Exemple

Considérez l'exemple suivant, où nous souhaitons diviser notre application en frontend et les zones d'administration.

Dans l'exemple ci-dessus, la première définition 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 de composants . Au lieu de cela, vous les placez dans un autre . Par exemple :

Devrait devenir :

Et le composant Topics serait défini comme suit :

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

Cette structure permet plus de flexibilité et de contrôle sur le routage de votre application.