Cuando se registra/inicia sesión/actualiza la página, la página de inicio de sesión parpadea justo antes de ir a la página correcta. Intenté instalar un cargador, pero todo lo que hace es hacer una animación del cargador antes de que parpadee y luego vaya a la página correcta. ¿Alguna idea de cómo hacer que esto no suceda?
function App(){ const [user, setUser] = useState(); const [loading, setLoad] = useState(true); useEffect(() => { const unsubscribe = onAuthStateChanged(getAuth(), setUser, setLoad(false)) return () => {unsubscribe()} }, []) const AuthenticatedRoute = ({children}) => { let isAuthenticated; if(user !=null){ isAuthenticated = true; }else{ isAuthenticated = false; } if(!loading){ return isAuthenticated? children: <Navigate to="/signin"/> }else{ return <Loading/> } } const UnauthenticatedRoute = ({children}) => { let isAuthenticated; if(user !=null){ isAuthenticated = true; }else{ isAuthenticated = false; } if(!loading){ return !isAuthenticated? children: <Navigate to="/home"/> }else{ return <Loading/> } } return( <Router> <div className="App"> { <Routes> <Route exact path="/" element={<UnauthenticatedRoute><PreHome/></UnauthenticatedRoute>}/> <Route path='/home' element={<AuthenticatedRoute><Home/></AuthenticatedRoute>} /> <Route exact path="/signin" element={<UnauthenticatedRoute><Signin/></UnauthenticatedRoute>} /> <Route exact path="/signup" element={<UnauthenticatedRoute><Signup/></UnauthenticatedRoute>} /> </Routes> } </div> </Router> ) }Código de cierre de sesión: esta línea ha estado funcionando para cerrar sesión
<button onClick={() => signOut(getAuth())}>Sign Out</button>Código de inicio de sesión:
async function OnFormSubmit(e){ e.preventDefault(); const auth = getAuth(); try{ isLoading(true); await signInWithEmailAndPassword(auth, email, pw) isLoading(false); }catch(err){ console.log(err) } }onAuthStateChanged .App del componente.Outlet para que las rutas anidadas se rendericen. Esto le permite representarlos como rutas de diseño en lugar de componentes envolventes individuales.user indefinido como el "estado de carga".Ejemplo:
import { Outlet, Navigate } from 'react-router-dom'; const AuthenticatedRoute = ({ user }) => { if (user === undefined) return <Loading />; return user ? <Outlet /> : <Navigate to="/signin" />; }; const UnauthenticatedRoute = ({ user }) => { if (user === undefined) return <Loading />; return user ? <Navigate to="/home" /> : <Outlet />; };...
function App(){ const [user, setUser] = useState(); useEffect(() => { const unsubscribe = onAuthStateChanged(getAuth(), setUser); return unsubscribe; }, []); return( <AuthContextProvider> <Router> <div className="App"> <Routes> <Route element={<UnauthenticatedRoute user={user} />}> <Route path="/" element={<PreHome />} /> <Route path="/signin" element={<Signin />} /> <Route path="/signup" element={<Signup />} /> </Route> <Route element={<AuthenticatedRoute user={user} />}> <Route path='/home' element={<Home />} /> </Route> </Routes> </div> </Router> </AuthContextProvider> ); }