React Router 4 Nested Routes not rendering

This behaviour happens because have an exact attribute mentioned on the parent route

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

So what happens is that react-router sees a path /test to match and then tries to match it starting from the top level. and it sees two routes one is exactly / and other is /contribute. None of them match the required path and hence you see a blank page

You need to write

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

So when you do this, it will see / which matches /test partially and then will try to find a matched route in the landing component which it will find.

Also change the order of the parent Route, since Switch renders the first match and / is a partial match for /test so /contribute wont work

Your final code would look like

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

Leave a Comment