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 = () => (
<BrowserRouter>
<Provider store={store}>
<Switch>
<Route path="/contribute" component={Contribute} />
<Route path="/" component={Landing} />
</Switch>
</Provider>
</BrowserRouter>
);