Wie strukturieren Sie verschachtelte Routen in React Router v4 und v5?

Verschachtelte Routen in React Router

In den React Router-Versionen 4 und 5 beinhaltet das Verschachteln von Routen einen etwas anderen Ansatz. Anstatt Komponenten platzieren Sie sie innerhalb einer anderen .

Zum Beispiel die folgende verschachtelte Routenkonfiguration:

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

Sollte wie folgt strukturiert sein:

<Route path="/" component={Frontpage} />
<Route path="/admin" component={Backend} />

Innerhalb dieser Komponenten können Sie die untergeordneten Routen als Unterkomponenten der übergeordneten Komponente definieren, wie in diesem Beispiel gezeigt:

<code class="javascript">const Frontpage = ({ match }) => (
  <div>
    {/* Child routes for the frontend */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/about`}></Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);

const Backend = ({ match }) => (
  <div>
    {/* Child routes for the admin area */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/users`}></Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

Diese überarbeitete Struktur stellt sicher, dass /home innerhalb der Frontend-Komponente unter / zugänglich ist, während /admin/ Home innerhalb der Backend-Komponente ist unter /admin/home zugänglich.

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