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

【问题标题】：Change navbar background color on other routes in ReactJS在 ReactJS 中更改其他路由上的导航栏背景颜色
【发布时间】：2021-09-25 04:22:55
【问题描述】：

我有以下反应代码。

the code

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

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

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

【问题讨论】：

标签： css reactjs dynamic colors routes

【解决方案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 组件文件中使用它？