Estoy tratando de aprender React & context.

En el siguiente ejemplo, mi consola registra correctamente al usuario (que actualmente está configurado) en app.js, pero en el componente RequireAuth (y en su elemento secundario) los registros no están definidos.

Probablemente podría pasar user y setUser como accesorios y hacer que funcionen, pero el objetivo es comprender qué está mal y aprender a usar el contexto correctamente.

¡Gracias por la ayuda!

userContext.js

 import React, { createContext, useContext, useState } from "react"; const UserContext = createContext(); export function useAuth() { return useContext(UserContext); } const UserProvider = ({ children }) => { const [state, setState] = useState(undefined); return ( <UserContext.Provider value={[state, setState]}> { children } </UserContext.Provider> ); } export default UserProvider;

aplicación.js

 import React from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; // Components // [...] // Auth Components import RequireAuth from './requireAuth'; // Context import UserProvider from './userContext'; import { useAuth } from './userContext'; function App() { return ( <Router> <UserProvider> <Main /> </UserProvider> </Router> ); } function Main() { const [ user, setUser ] = useAuth(); console.log(user) // LOGS USER return ( <div className="App"> <Navbar /> <Title /> <Routes> <Route path="/home" element={ <RequireAuth> <Home /> </RequireAuth> } /> </Routes> <Footer /> </div> ) } export default App;

requireAuth.js

 import React from 'react'; import { useAuth } from './userContext'; const RequireAuth = ({ children }) => { const [ user, setUser ] = useAuth(); console.log(user) // LOGS UNDEFINED /* Some logic running if user is set or not */ return children; } export default RequireAuth;