title: React router redirect to root blank page
body: <p>I can see <code>Login</code> component in <code>/</code>.<br>
  I can see <code>Home</code> component in <code>/home</code> (when logged in).</p>
  
  <p>But when I access <code>/home</code> without logging in, I get redirected to <code>/</code>, but it's showing a blank page.</p>
  
  <p>Why is it not showing me the <code>Login</code> component?</p>
  
  <p>Here's the <code>ProtectedRoute</code> component I use:</p>
  
  <pre class="lang-js prettyprint-override"><code>const ProtectedRoute = ({component: Component, isAuth, ...rest}) =&gt; {
    if (Cookies.get('token')) {
      isAuth = true
    }
    return &lt;Route {...rest} render={props =&gt; (isAuth ? &lt;Component {...props} /&gt; : &lt;Redirect exact to="/" /&gt;)} /&gt;
  }
  </code></pre>
  
  <p>Here's my route in <code>App.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
    return (
      &lt;div className={styles.App}&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/" component={Login} /&gt;
          &lt;ProtectedRoute path="/home" component={Home} isAuth={this.props.auth} /&gt;
          &lt;Route render={() =&gt; &lt;h1&gt;Not found&lt;/h1&gt;} /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Here's <code>BrowserRouter</code> as <code>Router</code> in <code>index.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router&gt;
        &lt;App /&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;,
  
    document.getElementById('root'),
  )
  </code></pre>