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

Posted 2023-03-25

【中文标题】在 ReactJS 中更改其他路由上的导航栏背景颜色

【英文标题】：Change navbar background color on other routes in ReactJS

【发布时间】：2021-09-25 04:22:55

【问题描述】：

我有以下反应代码。

the code

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

在另一种情况下： （我的问题是如何在反应中访问链接“路由”或“路径”，因为我想添加条件，如 ==> if (path =="./about) do somthing...）

有没有办法做到这一点？非常感谢您的帮助。

【参考方案1】：

以下代码有效：

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>

【讨论】：

Tnx 人这工作得很好！ ? 一个额外的问题，我在我的项目中使用了外部 css 组件，例如 NavbarStyle.js 我如何将状态传递给该 navbarstyle 组件并在该文件中使用它？

您可以将道具传递给子组件：export function ChildComponent(yourState); 并像这样调用它：<ChildComponent yourState=myState />

【参考方案2】：

如果您使用的是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中

【讨论】：

Tnx 为您提供帮助?我之前从未使用过 useLocation 挂钩，有没有办法直接在像 NavbarStyle.js 这样的 css 组件文件中使用它？