1

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.

ashfaq.p
  • 5,379
  • 21
  • 35

1 Answers1

1

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,

  1. remove exact=true so that / also matches /reviews
  2. change the order of / and /login, so that it first tries to match /login and then /
Anurag Awasthi
  • 6,115
  • 2
  • 18
  • 32