Q:

Nested route not working in React

I have two routes in App.js
<Switch>
    <MainRoute exact={true} path="/" component={Main} />
    <Route path="/login" component={Login} />
</Switch>

In Main component I have:
<div><Link to="/reviews" /></div>
<div style={{ height: '1000px' }}>
  {/* Routes */}
  <Switch>
    <Route path="/reviews" component={Reviews} />
  </Switch>
</div>

The login and Main route work properly and link is displayed.  But after clicking on the link, the page becomes blank. 
PS: I am a newbie in React. 

A:

Change your routes like this,
<Switch>
    <Route path="/login" component={Login} />
    <MainRoute path="/" component={Main} />
</Switch>

First it'll match path /login and if it doesn't match it'll match /. / will match to both / and /reviews.  You need to,

remove exact=true so that / also matches /reviews
change the order of / and /login, so that it first tries to match /login and then /

