hola, estoy haciendo rutas protegidas usando react router v6, está redirigiendo bien, pero digamos que estoy en /iniciar sesión y no estoy autenticado y quiero ir a /dashboard aquí /dashboard se representará durante unos pocos milisegundos (yo puedo verlo), luego seré redirigido a /iniciar sesión, ¿cómo puedo evitar esa representación? aquí está mi código:
import { useEffect, useState } from "react"; import { Route, useNavigate } from "react-router-dom"; import { Auth } from "aws-amplify"; const protectedRoute = (Comp, route = "/login") => (props) => { const navigate = useNavigate(); const checkAuthState = async () => { try { await Auth.currentAuthenticatedUser(); console.log("React Router user authenticated "); } catch (err) { console.log("React Router we have an error"); navigate(route); } }; useEffect(() => { checkAuthState(); }); return <Comp {...props} />; }; export default protectedRoute;así ordené mis rutas en App.js
<Router> <Routes> <Route path="/" element={<Navigate to="/login" replace={true} />} /> <Route path="/login" element={<Login />} /> <Route path="dashboard/*" element={<Dashboard />} /> <Route path="/signup" element={<Signup />} /> <Route path="RecoverPassword" element={<RecoverPassword />} /> <Route path="resetPassword" element={<ResetPassword />} /> <Route path="verifycode" element={<VerifyCode />} /> <Route path="policy" element={<>this is policy</>} /> </Routes> </Router>Puede crear un indicador para indicar si la verificación está activada o no, mientras que puede mostrar algún cargador al usuario en lugar del componente.
onst protectedRoute = (Comp, route = "/login") => (props) => { const navigate = useNavigate(); const loading = useState(false); const checkAuthState = async () => { // start checking, show loader setLoading(true) try { await Auth.currentAuthenticatedUser(); console.log("React Router user authenticated "); } catch (err) { console.log("React Router we have an error"); navigate(route); } // end checking, hide loader setLoading(false) }; useEffect(() => { checkAuthState(); }, []); if(loading) { return "loading..." } return <Comp {...props} />; };lo entendí, sabes que lo que estaba sucediendo es que useEffect se ejecutará cuando mi componente se monte (devolví el componente de redirección para que se renderice) lo que hice fue poner mi componente en un estado inicializado para vaciar <></> luego cuando mi montajes de ruta protegidos cambio el estado a lo que quiero renderizar
import { useEffect, useState } from "react"; import { Route, useNavigate } from "react-router-dom"; import { Auth } from "aws-amplify"; const protectedRoute = (Comp, route = "/login") => (props) => { const navigate = useNavigate(); const [corps, setCorps] = useState(<></>); const checkAuthState = async () => { try { await Auth.currentAuthenticatedUser(); console.log("React Router user authenticated "); } catch (err) { console.log("React Router we have an error"); return navigate(route); } }; useEffect(() => { checkAuthState(); setCorps(<Comp {...props} />); }, []); return corps; }; export default protectedRoute;