Wie implementiert man verschachteltes Routing in React Router v4/v5?

Verschachteltes Routing mit React Router v4/v5

React Router bietet einen leistungsstarken Mechanismus zum Erstellen verschachtelter Routen innerhalb Ihrer React-Anwendungen. Dadurch können Sie Ihre Routen modularisieren und komplexe Navigationsstrukturen erstellen.

Um verschachtelte Routen in React Router v4 zu erstellen, würden Sie eine übergeordnete Route definieren und darin untergeordnete Routen angeben. Um Ihre App beispielsweise in Frontend- und Admin-Bereiche zu unterteilen:

<code class="jsx"><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} /></code>

Es ist jedoch wichtig zu beachten, dass Routen in React Router v4 nicht in anderen Routen verschachtelt sind. Stattdessen werden untergeordnete Routen innerhalb einer übergeordneten Komponente platziert. Somit würde der obige Code wie folgt umgewandelt werden:

<code class="jsx"><Route path="/" component={Frontpage} /></code>

Mit dieser übergeordneten Komponente:

<code class="jsx">const Frontpage = ({ match }) => (
  <div>
    <h2>Frontend</h2>
    <Link to={`${match.url}/home`}>Home</Link>
    <Link to={`${match.url}/about`}>About</Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);</code>

Ähnlich für den Admin-Bereich:

<code class="jsx"><Route path="/admin" component={Backend} /></code>

Mit diese übergeordnete Komponente:

<code class="jsx">const Backend = ({ match }) => (
  <div>
    <h2>Admin</h2>
    <Link to={`${match.url}/home`}>Dashboard</Link>
    <Link to={`${match.url}/users`}>Users</Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

Mit diesem Ansatz können Sie modulare und wiederverwendbare Komponenten erstellen, die sowohl Routendefinitionen als auch UI-Rendering für verschiedene Abschnitte Ihrer Anwendung kapseln.

Das obige ist der detaillierte Inhalt vonWie implementiert man verschachteltes Routing in React Router v4/v5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!