Estoy usando el gancho useAuth para mi authContext , de modo que puedo usar el gancho para establecer estados globales para mis componentes.

Ahora, estoy tratando de navegar a la página '/' si el usuario no inició sesión, y también mostrar un requireLoginAlert al usuario en la página '/' después de que el usuario fue redirigido. Sin embargo, recibí el siguiente error cuando intento incluir la setRequireLoginAlert(true) en requireAuth.js .

 Warning: Cannot update a component (`AuthProvider`) while rendering a different component (`RequireAuth`). To locate the bad setState() call inside `RequireAuth`

Mi requireAuth.js :

 const RequireAuth = () => { const { auth, setRequireLoginAlert } = useAuth(); const location = useLocation(); return ( auth?.user ? <Outlet /> : <Navigate to='/' state={{ from: location }} replace /> && setRequireLoginAlert(true) ); }; export default RequireAuth;

Mi AuthContext.js

 const AuthContext = createContext({}); export const AuthProvider = ({ children }) => { const [auth, setAuth] = useState({}); const [requireLoginAlert, setRequireLoginAlert] = useState(false); return ( <AuthContext.Provider value={{ auth, setAuth, requireLoginAlert, setRequireLoginAlert }}> {children} </AuthContext.Provider> ); }; export default AuthContext;

Intenté usar useEffect para mostrar la alerta cada vez que la location ha cambiado, pero de esta manera la alerta seguirá apareciendo cada vez que vaya a otras páginas, lo cual no es lo ideal. Necesito un disparador para cambiar el estado requireLoginAlert después de que el usuario fue redirigido sin error.

Siéntase libre de dejar un comentario si tiene alguna idea. Muchas gracias.