Changing background Image based on Route in React - reactjs

Question

Hey I have a background image for Home component. I've placed the background image in Header Component. In my Header component there is a navbar and the background image. I've place the Header component outside switch inside React Router so that some pages can access the navbar. Now what I want to do is when I go to a food description page I want to keep the navbar but I want to change/remove the background Image . How can I achieve that ?
App.js
function App() {
return (
<div>
<DataContextProvider>
<LoginContextProvider>
<Router>
<Header></Header>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/food/:id" component={FoodDetail} />
</Switch>
</Router>
</LoginContextProvider>
</DataContextProvider>
</div>
);
}
Header.js
<div className={classes.grow}>
<AppBar position="fixed" style={{ backgroundColor: "white" }}>
<Container>
<Toolbar>
<Link to="/">
<Typography className={classes.title} variant="h6" noWrap>
Material-UI
</Typography>
</Link>
<div className={classes.grow} />
<div className={classes.sectionDesktop}>
{loggedInUser.email ? (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircleIcon style={{ fill: "black" }} />
</IconButton>
<p className={classes.textColor}>{loggedInUser.name}</p>
</MenuItem>
) : (
<MenuItem onClick={handleLogin}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircleIcon style={{ fill: "black" }} />
</IconButton>
<p className={classes.textColor}>Login</p>
</MenuItem>
)}
<IconButton
aria-label="show 11 new notifications"
color="inherit"
>
<Badge badgeContent={0} color="secondary">
<ShoppingCart style={{ fill: "black" }}></ShoppingCart>
</Badge>
</IconButton>
</div>
<div className={classes.sectionMobile}>
<IconButton
aria-label="show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="inherit"
>
<MenuIcon style={{ fill: "black" }} />
</IconButton>
</div>
</Toolbar>
</Container>
</AppBar>
{renderMobileMenu}
{renderMenu}
<div style={{ backgroundImage: `url(${bg})` }} className="header">
<h2>Whatever you need, we will deliver it to you!</h2>
<Paper component="form" className="search">
<InputBase
className={classes.input}
placeholder="Search Keywords"
inputProps={{ "aria-label": "search google maps" }}
onChange={(e) => setSearch(e.target.value)}
/>
<IconButton
type="submit"
className={classes.iconButton}
aria-label="search"
>
<SearchIcon />
</IconButton>
</Paper>
</div>
</div>
);
};
FoodDetail.js
const FoodDetail = () => {
const { id } = useParams();
const [foodDetails, setFoodDetails] = useState({});
useEffect(() => {
fetch(`http://localhost:5000/api/foods/${id}`)
.then((res) => res.json())
.then((data) => {
setFoodDetails(data);
console.log(data);
});
}, [id]);
return (
<div>
<h1>Details</h1>
<h1>Name: {foodDetails.name} </h1>
</div>
);
};

Answer 1

You need to use 'useLocation' to get the page path and then add it in a className.
Header.js
import React from "react";
import { useLocation } from "react-router-dom";
import "./Header.css";
import Navigation from "../Navigation/Navigation";
export default function Header() {
const path = useLocation().pathname;
const location = path.split("/")[1];
return (
<div className={"header " + location}>
<Navigation />
</div>
);
}
Header.css
.header {
height: 300px;
}
.header.home {
background: grey
}
.header.about {
background: red
}
.header.contact {
background: yellow
}
Check my complete demo : Stackblitz