Verschachtelte Routen mit React Router v4/v5

Mit verschachtelten Routen können Sie eine hierarchische Struktur für die Navigation innerhalb Ihrer React-Anwendung erstellen. In React Router v4 und v5 können Sie dies erreichen, indem Sie die Komponenten und verwenden.

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir unsere Anwendung in Frontends aufteilen möchten und Admin-Bereiche.

Im obigen Beispiel definiert die erste -Definition die Frontend-Routen, während die zweite die Admin-Routen definiert. Jede Route ist einer Komponente zugeordnet, die gerendert werden soll, wenn auf diese Route zugegriffen wird.

Überlegungen

In React Router v4 verschachteln Sie keine -Komponenten. Stattdessen platzieren Sie sie in einer anderen . Zum Beispiel:

Sollte werden:

Und die Topics-Komponente würde wie folgt definiert:

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

Diese Struktur ermöglicht mehr Flexibilität und Kontrolle über das Routing Ihrer Anwendung.