estoy intentando hacer un componente privado, para que no se pueda ir a la página /proyectos en caso de que el usuario no está logeado, pero no lo consigo. Creo que dado que el usuario de firebase llega de manera asincrona, pero no consigo arreglarlo. De momento mi código es:
import React, { useContext, useEffect, useRef, useState } from "react";
import { Route, Navigate, useNavigate } from "react-router-dom";
import AuthContext from "../../context/auth/authContext";
import FirebaseContext from "../../firebase/context";
import firebase from "../../firebase";
const RutaPrivada = ({
component: Component,
path,
redirect,
value,
...props
}) => {
const authContext = useContext(AuthContext);
const { unsuscribe, usuario, autenticado } = authContext;
// useEffect(() => {
// unsuscribe();
// }, []);
console.log(usuario);
// setTimeout(() => {
// if (!value) {
// return <Navigate to="/" />;
// }
// });
if (!usuario) {
return <Navigate to="/" />;
}
return <Route {...props} render={(props) => <Component {...props} />} />;
};
// if (!usuario) {
// return <Navigate to="/" />;
// }
export default RutaPrivada;
De momento consigo que no se pueda entrar a proyectos si el usuario no está logueado, pero si recargo la pagina pierdo la conexión y me vuelve al login.
Alguien podría ayudarme?? Gracias