Wie erstelle ich verschachtelte Routen in React Router v4/v5?

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 Funktion und Komponenten.

Beispiel

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

<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} />

Im obigen Beispiel ist das erste < ;Übereinstimmung> Die Definition definiert 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 nicht. Komponenten. Stattdessen platzieren Sie sie in einer anderen . Zum Beispiel:

<Route path="/topics" component={Topics} />

Sollte werden:

<Route path="/topics" component={Topics} />

Und die Themenkomponente würde wie folgt definiert:

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

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich verschachtelte Routen in React Router v4/v5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!