React Router 4 verschachtelte Routen

Question

Ich versuche, verschachteltes Routing in einer meiner Komponenten zu tun.

Hier ist die übergeordnete Komponente:

const App =() => (
    <BrowserRouter> 
    <Provider store={store}> 
     <Switch> 
     <Route exact path="/" component={Landing} /> 
     <Route path="/contribute" component={Contribute} /> 
     </Switch> 
    </Provider> 
    </BrowserRouter> 
); 

Und hier ist das Kind Komponente:

const Landing =() => (
    <div> 
    <SearchBar /> 
    <section className="results-sctn"> 
     <Route exact path="/" component={ArtistList} /> 
     <Route path="/test" component={Test} /> 
    </section> 
    </div> 
); 

ArtistList auf der / Route fein macht, aber /test macht eine völlig leere Seite. Irgendeine Idee warum das sein könnte?

Answer 1

Dieses Verhalten tritt auf, weil ein exact auf der Strecke Mutter erwähnt Attribut

<Route exact path="/" component={Landing} /> 

Was passiert also, dass reagieren-Router sieht einen Pfad /test zu passen und dann versucht, es von der obersten Ebene beginnen zu lassen. und es sieht zwei Routen ist exactly / und andere ist /contribute. Keiner von ihnen den gewünschten Pfad übereinstimmen und Sie daher eine leere Seite

Sie sehen müssen

<Route path="/" component={Landing} /> 

So schreiben, wenn Sie dies tun, wird es / sehen, die /test teilweise übereinstimmt und dann versuchen, eine finden passende Route in der landing Komponente, die es finden wird.

Auch die Reihenfolge der Mutter Route ändern, da Switch das erste Spiel macht und / ist eine teilweise Übereinstimmung für /test so /contribute nicht funktionieren

Ihr endgültigen Code wie

const App =() => (
    <BrowserRouter> 
    <Provider store={store}> 
     <Switch> 
     <Route path="/contribute" component={Contribute} /> 
     <Route path="/" component={Landing} /> 
     </Switch> 
    </Provider> 
    </BrowserRouter> 
);