如何根据屏幕上显示的组件更改主体背景

Question

我正在使用React Hooks和Router创建一个电子商务网站。目前我有一个空白的主页，注册和登录页面。当路线更改为/注册时，我想更改我的背景。加载注册组件时如何添加背景图像？下面是我的应用程序组件。

function App() {
return (
<BrowserRouter>
<Routes>
<Route exact path ='/' element={<Home />} />
<Route path='/signup' element={<Signup />} />
<Route path='/login' element={<Login />} />
</Routes>
</BrowserRouter>
);
}

Answer 1

您可以添加当前位置检查(使用react router useLocation((方法(，并根据所需值更新css background:

import {Route, Link, Routes, useLocation} from 'react-router-dom';

const location = useLocation();

console.log('pathname', location.pathname);