React路由切换时修改导航栏样式重渲染致页面无响应，求替代方案

1. 原始代码未给useEffect传入依赖数组，每次组件渲染都会执行回调逻辑，路径匹配时调用setActive会触发组件重渲染，进而再次执行useEffect，进入无限循环，直接导致页面无响应。
2. 传入空依赖数组时，useEffect仅会在组件首次挂载时执行1次，后续路由切换导致location变化时不会触发逻辑重新执行，无法更新导航状态。
3. 仅传入location作为依赖仍不生效的核心原因是：原有逻辑仅覆盖了设置active为true的分支，没有补充匹配失败时重置为false的逻辑，路由离开目标页面后状态不会回退，看起来功能失效。

方案1：补全useEffect逻辑+正确配置依赖 #

给useEffect补充else分支重置状态，同时将location.pathname作为唯一依赖项，仅在路径变化时触发逻辑执行：

const [active, setActive] = React.useState(false);
const location = useLocation();

React.useEffect(() => {
  if (location.pathname === "/Catalogues" || location.pathname === "/About") {
    setActive(true);
  } else {
    setActive(false);
  }
}, [location.pathname]);

return (
  <>
    <nav className={active ? "bg-white" : "bg-black"}>
      <div>.....</div>
    </nav>
  </>
);

方案2：直接推导样式，省略状态与useEffect（最优解） #

该场景不需要额外维护状态，直接在渲染阶段根据路径计算导航栏类名即可，代码更简洁，完全规避重渲染风险：

const location = useLocation();

return (
  <>
    <nav className={
      (location.pathname === "/Catalogues" || location.pathname === "/About")
        ? "bg-white"
        : "bg-black"
    }>
      <div>.....</div>
    </nav>
  </>
);

方案3：react-router v6环境使用useMatch适配路由规则 #

如果使用react-router v6，可通过useMatch钩子更精准匹配路由，支持带参数的路由规则匹配：

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

const isTargetPage = useMatch({ path: "/Catalogues" }) || useMatch({ path: "/About" });

return (
  <>
    <nav className={isTargetPage ? "bg-white" : "bg-black"}>
      <div>.....</div>
    </nav>
  </>
);

内容的提问来源于stack exchange，提问作者AAGAM JAIN