Heim > Artikel > Web-Frontend > Wie erstelle ich verschachtelte Routen in 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
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.
In React Router v4 verschachteln Sie
<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!