Obtengo un nombre de usuario de "login.jsx" y quiero pasarlo a "App.js" para acceder a todas partes. ¿Cómo puedo hacer eso?
function App() { const [user, setUser] = useState(null); useEffect(() => { }, []); return ( <BrowserRouter> <Offer/> <Navigationbar/> <Route path="login" element={user ? <Navigate to="/courses" /> : <Login />} /> </Routes> <Footer /> </BrowserRouter> ); }puede pasar la función de devolución de llamada al componente de inicio de sesión como accesorios y llamar a este accesorio dentro del componente de inicio de sesión y pasar el nombre de usuario como argumento, luego dentro de la función de devolución de llamada llama a la función setUser para actualizar el valor del usuario
function App() { const [user, setUser] = useState(null); const updateUser = (value) => { setUser(value); } useEffect(() => { }, []); return ( <BrowserRouter> <Offer/> <Navigationbar/> <Route path="login" element={user ? <Navigate to="/courses" /> : <Login updateUser={updateUser} />} /> </Routes> <Footer /> </BrowserRouter> ); }Así es como puedes hacer eso
Aplicación.jsx
function App() { const [user, setUser] = useState(null); useEffect(() => { }, []); const updateUser = (newUser) => { setUser(newUser); } return ( <BrowserRouter> <Offer/> <Navigationbar/> <Route path="login" element={user ? <Navigate to="/courses" /> : <Login onNewUser={updateUser} />} /> </Routes> <Footer /> </BrowserRouter> ); }En Login.jsx cuando recibe una nueva llamada de usuario props.updateUser (usuario)
Puedes hacer eso con React Context;
Básicamente, los contextos son estados globales. Puede leer más aquí: https://reactjs.org/docs/context.html
Le permite envolver su <App /> en un proveedor de contexto y pasar a su envoltorio un valor que podrá usar en su aplicación.