Reagiere Router und verschachtelte Routen

Question

Ich bin verwirrt darüber, wie man die folgende (wirklich einfache) Routenstruktur erstellt.

Ich habe eine App, die eine Top-Level-Route für die Login-Komponente hat:

und andere Top-Level-Route für die App selbst (nennen wir es die Home-Komponente):

Jetzt hat die Home-Komponente eine Kopfzeile, eine Seitenleiste und den Hauptraum für die untergeordneten Ansichten.

Die Login-Komponente sollte unter /login Pfad angezeigt werden; das ist einfach genug. Aber was verwirrt mich ist, dass ich den / Pfad die Home-Komponente mit einer bestimmten Kindkomponente (nennen wir es Willkommen) in der Hauptansicht zeigen soll. Außerdem sollten die meisten anderen Routen, die ich mir vorstellen kann, untergeordnete Komponenten in der Home-Komponente darstellen.

So wiederholen:

Weg / macht die Hauptkomponente mit der Welcome-Komponente im Inneren

Pfad /foo die Home-Komponente mit der Komponente Foo macht seine Inneren

...

Pfad /login rendert die Login-Komponente

Es fühlt sich an wie die Struktur, an die ich denke, ist:

aber das ist eindeutig falsch. Was wäre der richtige Weg, um diese Routing-Struktur zu implementieren?

Answer 1

Dies ist wahrscheinlich eine gute Lösung, versuchen Sie es.

<Route component={App}> 
    <Route path="/" component={Home}> 
    <IndexRoute component={Welcome}/> 
    <Route path="/foo" component={Foo}/> 
    </Route> 
    <Route path="/login" component={Login}/> 
</Route>