title: How can I check if login is successful, then display the protected routes in react hooks
body: <p>After successful login how can I see/access <code>Dashboard, CreatedLink</code> components mentioned inside the protected route. Could someone please advise how do I check
  <code>loginEmail</code> is available in localStorage then display the above components else display login. Do I need another component for navigation to achieve this ?</p>
  <p><code>App.js</code></p>
  <pre><code>import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  import Dashboard from &quot;./components/dashboard&quot;;
  import CreateLink from &quot;./components/createLink&quot;;
  import Nominate from &quot;./components/nominate&quot;;
  import Login from &quot;./components/login&quot;;
  import { ProtectedRoute } from &quot;./components/protectedRoute&quot;;
  import ErrorPage from &quot;./components/errorPage&quot;;
  
  function App() {
    return (
      &lt;Router&gt;
          &lt;div&gt;
            &lt;div className=&quot;navbar-nav&quot;&gt;
  
            &lt;/div&gt;
            &lt;Switch&gt;
                &lt;ProtectedRoute exact path='/dashboard' component={Dashboard} /&gt;
                &lt;ProtectedRoute exact path='/createLink' component={CreateLink} /&gt;
                &lt;Route exact path='/' component={Login} /&gt;
                &lt;Route path='/nominate/:token' component={Nominate} /&gt;
                &lt;Route path='/errorPage' component={ErrorPage} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><code>login.js</code></p>
  <pre><code>import React, { useRef, useEffect, useState } from &quot;react&quot;;
  import { useGoogleLogin  } from 'react-google-login';
  import { refreshToken } from '../utils/refreshToken';
  
  const clientId =&quot;client_id_here&quot;;
  
  const Login = () =&gt; {
  
      const [userEmail, setUserEmail] = useState(&quot;&quot;);
  
      const onSuccess = (res) =&gt;{
          console.log(&quot;Login successfully&quot;,res.profileObj);
          const email = res.profileObj.email;
          setUserEmail(email);
          window.localStorage.setItem(&quot;loginEmail&quot;, email);
          refreshToken(res);
      }
      const onFailure = (res) =&gt; {
          console.log('Login failed: res:', res);
          alert(
              `Failed to login !`
          );
      };
      const {signIn} = useGoogleLogin ({
          onSuccess,
          onFailure,
          clientId,
          isSignedIn: true,
          accessType: 'offline',
      })
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
              &lt;div className=&quot;inputForm&quot;&gt;
                  &lt;button onClick={signIn}&gt;
                      &lt;img src=&quot;images/google.png&quot; className=&quot;loginG&quot;/&gt;
                      &lt;span className=&quot;loginText&quot;&gt;Sign in&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      )
  }
  
  export default Login;
  </code></pre>
  <p><code>protectedRoute.js</code></p>
  <pre><code>import React from &quot;react&quot;;
  import { Route, Redirect } from &quot;react-router-dom&quot;;
  
  export const ProtectedRoute = ({ component: Component, ...rest }) =&gt; {
      return (
          &lt;Route
              {...rest}
              render={(props) =&gt; {
                  if (localStorage.getItem(&quot;loginEmail&quot;)) {
                      return &lt;Component {...props} /&gt;;
                  } else {
                      return (
                          &lt;&gt;
                              &lt;Redirect
                                  to={{
                                      pathname: &quot;/&quot;,
                                      state: {
                                          from: props.location,
                                      },
                                  }}
                              /&gt;
                          &lt;/&gt;
                      );
                  }
              }}
          /&gt;
      );
  };
  </code></pre>
  <p><strong>Sandboxlink</strong></p>
  <p><a href="https://codesandbox.io/s/gracious-forest-4csz3?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/gracious-forest-4csz3?file=/src/App.js</a></p>