//PrivateAuthComponent.js import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import { useRouter } from "next/router"; const PrivateAuth = ({ children }) => { const router = useRouter(); const [userLoaded, setUserLoaded] = useState(false); const userExists = useSelector((state) => state.user); console.log("User in private auth", userExists); useEffect(() => { if (userExists && userExists.token) { setUserLoaded(true); } else { router.replace("/login"); setUserLoaded(false); } }, []); return userLoaded && <>{children}</>; }; export default PrivateAuth; //UserHistory.js import React from "react"; import PrivateAuth from "../../auth/privateAuth"; const history = () => { return ( <PrivateAuth> <div className="container-fluid"> <div className="row">User Page</div> </div> </PrivateAuth> ); }; export default history;Estoy tratando de envolver algunas páginas para que los usuarios que no hayan iniciado sesión no puedan acceder a ellas. Cuando inicio sesión, se me redirige a la página de usuario/historial según lo previsto. Pero quiero ir manualmente al usuario/historial por segunda vez, la página se vuelve a cargar y lo que sucede es que redux store tarda un poco en actualizarse, pero ese código dentro de useEffect se ejecuta antes de que esto suceda, lo que hace que se ejecute ese bloque dentro de else. Así que me redirigen a la página "/iniciar sesión" porque los usuarios aún no existen y, por lo tanto, nunca vuelvo a la página de usuario/historial como estaba previsto, incluso cuando estoy conectado y la tienda redux está actualizada. ¿Qué puedo hacer sobre esto?
Sugeriría agregar un estado de carga cuando se realiza la llamada a la API,
La carga es verdadera show loader Si el usuario no existe, redirija a /iniciar sesión, de lo contrario, represente a los niños
const PrivateAuth = ({ children }) => { const { user, loading } = useSelector((state) => state); if (loading) return <Loader />; if (!user) return <Redirect to="/login" />; return <>{children}</>; };