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.