Я хочу, чтобы домашняя страница отображалась только в том случае, если пользователь ранее вошел в систему и не вышел из нее. Но пользователь вышел из системы ранее, а затем показать страницу входа. Я сохраняю статус аутентификации в локальном хранилище следующим образом: ключ: аутентификация, значение: истина/ложь. В зависимости от значения аутентификации я хочу отобразить начальную страницу.

Это мой App.js:

import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Signup from "./Components/Signup";
import Login from "./Components/Login";
import { Routes, Route, Navigate } from "react-router-dom";
import HomePage from "./Components/HomePage";
import { useEffect, useState } from "react";

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const authStatus=localStorage.getItem('auth')

  const setAuth = (value) => {
    setIsAuthenticated(value);
    //alert(value);
  };
  useEffect(()=>{
    setIsAuthenticated(authStatus)
  },[])
  return (
    <>
      <Routes>
        <Route path = "/" element = {<HomePage  />} />
        <Route path = "/login" element = {<Login />} />
        <Route path = "/signup" element = {<Signup />} />
      </Routes>
    </>
  );
}

export default App;

В начале всегда открывается домашняя страница, но мне нужна домашняя страница, если статус входа пользователя истинен, который сохраняется в локальном хранилище браузера и на странице входа, если статус входа неверен.

Это мой логин.js:

import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import { Link, useNavigate } from "react-router-dom";

const initialValues = {
  email: "",
  password: "",
};

export default function Login({setAuth}) {
  const navigate = useNavigate();
  const [values, setValues] = useState(initialValues);
  function validateForm() {
    return values.email.length > 0 && values.password.length > 0;
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    Login();

    
  };

  const handleInputChange = (e) => {
    e.preventDefault();
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  function Login() {
    let retrievedData = localStorage.getItem("registeredUsers");
    let users = JSON.parse(retrievedData);
    let Found = users.find(function (user, index) {
      if (user.email === values.email && user.password === values.password) {
        return true;
      }
    });
    if (Found) {
      
      setAuth(true)
      let auth = true;
      localStorage.setItem("auth", JSON.stringify(auth));
      //navigate("/");
    } else {
      alert("Error email/password");
    }
  }

  return (
    <div className = "LoginContainer">
      <div style = {{ display: "flex", width: "100%" }}>
        <Form onSubmit = {handleSubmit}>
          <Form.Group size = "lg" controlId = "email">
            <Form.Label>Email</Form.Label>
            <Form.Control
              autoFocus
              type = "email"
              name = "email"
              value = {values.email}
              onChange = {handleInputChange}
            />
          </Form.Group>
          <Form.Group size = "lg" controlId = "password">
            <Form.Label>Password</Form.Label>
            <Form.Control
              type = "password"
              name = "password"
              value = {values.password}
              onChange = {handleInputChange}
            />
          </Form.Group>
          <Button
            style = {{ marginTop: 10, width: 400 }}
            block
            size = "lg"
            type = "submit"
            // disabled = {!validateForm()}
          >
            Login
          </Button>
        </Form>
      </div>
      <text style = {{ marginTop: 10 }}>
        Don't have an account? <Link to = "/signup">Register</Link>
      </text>
    </div>
  )
}