在ReactJS中更改其他路线的导航栏背景颜色

Question

我有下面的react代码。

代码

我想要的是当我点击"；关于"；菜单背景颜色应该从红色变为蓝色，否则保持红色。

在另一种情况下：(我的问题是如何访问react中的链接"route"或"path"，因为我想添加条件，比如==>if(path=="./about(do something…(

有办法做到这一点吗？我将感谢你的帮助。

Answer 1

如果使用react-router-dom

然后您可以使用useLocation挂钩来获取当前位置

首先导入

import { useLocation } from 'react-router-dom';

然后获取位置

const location = useLocation();

每当位置改变时，您可以使用useEffect挂钩来更改背景颜色

useEffect(()=>
{ 
if(location.pathname == '/about'){
// Change background color
}
}
},[location])

这应该对你有效

尝试将此代码包含在您的App.js中

Answer 2

以下代码有效：

const Nav = styled.nav`
height: 100px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
width: 100%;
z-index: 100;
/* background-color: red; */
`;
const Menu = styled.div`
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
justify-content: center;
`;
const Navbar = ({ toggle }) => {
const [navBg, setNavBg] = React.useState("red");
const location = useLocation();
React.useEffect(() => {
if (window.location.pathname === "/about") {
setNavBg("yellow");
} else {
setNavBg('red')
}
}, [location]);
return (
<Nav style={{ backgroundColor: navBg }}>
<h1 to="/">logo</h1>
<Menu>
<Link to="/">home</Link>
<Link to="/about">about</Link>
<Link to="/services">services</Link>
</Menu>
</Nav>