Debe pasar y luego puede acceder a él usando props.name en el archivo Home.js y también pasar accesorios en la función Home.js.

Es porque esta línea let user = useContext(UserContext) está almacenando undefined dentro de user , lo cual es normal porque no envolvió Home dentro de UserContext.Provider y le dio al user dentro de App como valor.

Cambie el retorno dentro de la App a esto:

 return ( <> <ThemeContext.Provider value={theme}> <Navigation /> </ThemeContext.Provider> <UserContext.Provider value={user}> <Home /> </UserContext.Provider> </> )

Y podrías simplificar tu regreso dentro de Home a esto:

 return ( <> <Alert variant="success">Welcome back, {user.name}!</Alert> <Card className="text-center col-md-10 mx-auto my-3"> <Card.Header>Featured</Card.Header> <Card.Body> <Card.Title>This is Our Featured Item</Card.Title> <Card.Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Card.Text> <Button variant="primary">Click Here</Button> </Card.Body> </Card> </> )

No está pasando el usuario para que lo consuma un componente secundario. Debe envolver la página de inicio con UserContext.Provider y pasar el usuario que le gustaría proporcionar. Además, puede eliminar la etiqueta UserContext.Consumer en la página de inicio, ya que está utilizando el enfoque Hooks para consumir desde un contexto.

 import React, { useState } from 'react' import Navigation from './Navigation' import ThemeContext from './ThemeContext' import UserContext from './UserContext' import Home from './Home' function App() { let [theme, setTheme] = useState({ variant: 'dark', toggleTheme: toggleTheme }) let [user, setUser] = useState({ name: "Alyssa" }) function toggleTheme() { setTheme(theme => ( { ...theme, variant: theme.variant === 'dark' ? 'light' : 'dark', } )) } return ( <> <ThemeContext.Provider value={theme}> <Navigation /> </ThemeContext.Provider> <UserContext.Provider value={user}> <ThemeContext.Provider value={theme}> <Home /> </ThemeContext.Provider> </UserContext.Provider> </> ) } export default App

Hogar

 import Card from 'react-bootstrap/Card' import Button from 'react-bootstrap/Button' import Alert from 'react-bootstrap/Alert' import UserContext from './UserContext' import { useContext } from 'react' function Home() { let user = useContext(UserContext) return ( <> <Alert variant="success">Welcome back, {user.name}!</Alert> <Card className="text-center col-md-10 mx-auto my-3"> <Card.Header>Featured</Card.Header> <Card.Body> <Card.Title>This is Our Featured Item</Card.Title> <Card.Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Card.Text> <Button variant="primary">Click Here</Button> </Card.Body> </Card> </> ) } export default Home