我在谷歌上搜索并尝试了各种解决方案，但似乎无法让我的应用程序正常工作。我希望我的应用程序根据屏幕上呈现的组件显示不同的背景图像。我正在用React Router实现这个应用程序，所有的样式都是用Material UI完成的。
正如其他类似文章中所建议的那样，我尝试将背景图像单独导入每个组件类，并使用className来渲染背景图像(尝试如下所示(。然而，当我尝试下面的解决方案时，我似乎无法获得任何要渲染的背景图像。事实上，我可以获得任何背景图像渲染的唯一方法是通过下面的App.css代码。然而，这样做会为整个应用程序设置一个恒定的背景图像，这让我回到了原点。
App.js
class App extends React.Component {
render() {
return (
<div>
<Router history={history}>
<NavBar />
<Route path="/" exact component={Home} />
<Route path="/contact" exact component={Contact} />
</Router>
</div>
);
}
}
接下来的两个代码段显示了我尝试根据渲染的组件显示不同的背景图像。
主页.js
import image from "../relative/path.jpeg";
const useStyles = makeStyles((theme) => ({
home_scene: {
backgroundImage: `url(${image})`,
},
}));
const Home = () => {
const classes = useStyles();
return (
<div className={classes.home_scene}>
.... a lot of code here, left out for readability
</div>
联系人.js
import image from "../different/image's/relative/path.jpeg";
const useStyles = makeStyles((theme) => ({
contact_scene: {
backgroundImage: `url(${image})`,
},
}));
const Contact = () => {
const classes = useStyles();
return (
<div className={classes.contact_scene}>
.... a lot of code here, left out for readability
</div>
当尝试这样做时，我根本无法获得任何背景图像。我可以显示任何背景图像的唯一方法是执行以下操作，在整个应用程序中留下一个静态背景。
App.css
body {
background: url(/path/to/file) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
也许有一种方法可以根据当前路线使用react路由器渲染背景图像，但我也不确定如何做到这一点。如有任何帮助，将不胜感激
您可以使用React Router的useLocation挂钩来获取当前url，并在此基础上设置背景图像。
https://reactrouter.com/web/api/Hooks/uselocation