title: I want to render the starting page based on user logged in or not on react
body: <p>What I want is to show the Homepage only if user has previously logged in and didn't logged out. But is user logged out previously then show loginpage. I'm saving auth status to local storage like this: key:auth, value:true/false. Depending on auth value I want to render the starting page.</p>
  <p>This is my App.js:</p>
  <pre><code>import &quot;./App.css&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import Signup from &quot;./Components/Signup&quot;;
  import Login from &quot;./Components/Login&quot;;
  import { Routes, Route, Navigate } from &quot;react-router-dom&quot;;
  import HomePage from &quot;./Components/HomePage&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  
  function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const authStatus=localStorage.getItem('auth')
  
    const setAuth = (value) =&gt; {
      setIsAuthenticated(value);
      //alert(value);
    };
    useEffect(()=&gt;{
      setIsAuthenticated(authStatus)
    },[])
    return (
      &lt;&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;HomePage  /&gt;} /&gt;
          &lt;Route path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;
          &lt;Route path=&quot;/signup&quot; element={&lt;Signup /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Its always opening Homepage in the starting but I want Homepage if user login status is true which is saved on localStorage of the browser and Login page if login status is false.</p>
  <p>This is my login.js:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Form from &quot;react-bootstrap/Form&quot;;
  import Button from &quot;react-bootstrap/Button&quot;;
  import { Link, useNavigate } from &quot;react-router-dom&quot;;
  
  const initialValues = {
    email: &quot;&quot;,
    password: &quot;&quot;,
  };
  
  export default function Login({setAuth}) {
    const navigate = useNavigate();
    const [values, setValues] = useState(initialValues);
    function validateForm() {
      return values.email.length &gt; 0 &amp;&amp; values.password.length &gt; 0;
    }
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      Login();
  
      
    };
  
    const handleInputChange = (e) =&gt; {
      e.preventDefault();
      const { name, value } = e.target;
      setValues({
        ...values,
        [name]: value,
      });
    };
  
    function Login() {
      let retrievedData = localStorage.getItem(&quot;registeredUsers&quot;);
      let users = JSON.parse(retrievedData);
      let Found = users.find(function (user, index) {
        if (user.email === values.email &amp;&amp; user.password === values.password) {
          return true;
        }
      });
      if (Found) {
        
        setAuth(true)
        let auth = true;
        localStorage.setItem(&quot;auth&quot;, JSON.stringify(auth));
        //navigate(&quot;/&quot;);
      } else {
        alert(&quot;Error email/password&quot;);
      }
    }
  
    return (
      &lt;div className=&quot;LoginContainer&quot;&gt;
        &lt;div style={{ display: &quot;flex&quot;, width: &quot;100%&quot; }}&gt;
          &lt;Form onSubmit={handleSubmit}&gt;
            &lt;Form.Group size=&quot;lg&quot; controlId=&quot;email&quot;&gt;
              &lt;Form.Label&gt;Email&lt;/Form.Label&gt;
              &lt;Form.Control
                autoFocus
                type=&quot;email&quot;
                name=&quot;email&quot;
                value={values.email}
                onChange={handleInputChange}
              /&gt;
            &lt;/Form.Group&gt;
            &lt;Form.Group size=&quot;lg&quot; controlId=&quot;password&quot;&gt;
              &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
              &lt;Form.Control
                type=&quot;password&quot;
                name=&quot;password&quot;
                value={values.password}
                onChange={handleInputChange}
              /&gt;
            &lt;/Form.Group&gt;
            &lt;Button
              style={{ marginTop: 10, width: 400 }}
              block
              size=&quot;lg&quot;
              type=&quot;submit&quot;
              // disabled={!validateForm()}
            &gt;
              Login
            &lt;/Button&gt;
          &lt;/Form&gt;
        &lt;/div&gt;
        &lt;text style={{ marginTop: 10 }}&gt;
          Don't have an account? &lt;Link to=&quot;/signup&quot;&gt;Register&lt;/Link&gt;
        &lt;/text&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>