Mi variable de usuario se define después de que el componente se monta después de registrarse o iniciar sesión, pero al navegar a otra página es nula. Tengo esto como el componente AuthContext después de que el usuario inicie sesión.

 useEffect(() => { const unsubscribe = auth.onAuthStateChanged(user=>{ setCurrentUser(user); }) {console.log(currentUser)} return unsubscribe }) const value = { signup, currentUser, logout, authError, login } return( <AuthContext.Provider value={value}> {children} </AuthContext.Provider> )

Este es mi componente App.js.

 function App() { return ( <Router> <div className = "App"> <AuthProvider> <Routes> <Route path="/" element={<Home/>}/> <Route element= {<AuthRoute/>}> {/* If user is already signed in re-direct to home */} <Route exact path = "/sign_up" element = {<SignUp/>} /> <Route exact path = "/login" element= {<SignIn/>}/> </Route> <Route exact path="/new_post" element ={<AuthRouteIfLoggedOut> <SignUp/> </AuthRouteIfLoggedOut>}/> <Route exact path="/about" element={<About/>}/> </Routes> </AuthProvider> </div> </Router> ); }

AuthContext es mi componente de contexto.

¿Alguna razón por la que cuando trato de navegar a otra página, el usuario no está definido o está "cerrado" solo en esa página? Pero cuando vuelvo a navegar a mi página principal, está conectado y funciona correctamente. ¿Alguna razón por la cual, al navegar a diferentes páginas, currentUser es nulo?