Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich verschachtelte Routen in React Router v4/v5?

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

DDD
DDDOriginal
2024-11-01 11:10:30240Durchsuche

How to Create Nested Routes 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn