Tengo un problema para que mi encabezado se actualice después de iniciar sesión con Firebase... Cuando actualizo mi navegador, vuelve como si no hubiera iniciado sesión hasta que se me redirige. Quiero volver a representar mi encabezado cuando se detecta que el usuario ha iniciado sesión después de la actualización.
Este es mi método actual para cambiar el encabezado.
<li> {!auth.currentUser && (<Link to="/signup/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Sign Up</Link>)} {auth.currentUser && (<Link to="/accounts/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>{auth.currentUser.displayName}</Link>)} </li>Terminé encontrando la respuesta y pensé que sería útil publicarla aquí.
Primero defino un estado para iniciar sesión.
const [isLoggedIn, setIsLoggedIn] = useState(false);Luego configuré el Estado usando:
useEffect(() => { const auth = getAuth(); onAuthStateChanged(auth, (user) => { setIsLoggedIn(!!user); }); }, []); Y luego medí el valor de isLoggedIn usando
{!isLoggedIn && (<Link to="/signup/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Sign Up</Link>)} {isLoggedIn && (<Link to="/accounts/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Account</Link>)}