更改路线更改导航栏的样式答案

【问题标题】：Change the style of navbar on route change更改路线更改导航栏的样式
【发布时间】：2021-10-27 02:58:17
【问题描述】：

当导航栏路由到不同的页面时，我正在使用此代码更改导航栏的样式。

但是，如果我使用下面的代码页会因为重新渲染而变得无响应。如果我传递一个空的 [] 或传递位置作为 useEffect 中的第二个元素，那么它不起作用。

那么有什么替代方法呢？

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

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

【问题讨论】：

标签： reactjs rendering use-effect tailwind-css

【解决方案1】：

您需要 setActive，但更重要的是 location 作为 useEffect 的依赖项

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

编辑：似乎没有必要在本地状态下进行活动你可以像这样简单地设置一个常量

 const isActive = (location.pathname === "/Catalogues") || (location.pathname === "/About");

然后删除useEffect和useState

【讨论】：

【解决方案2】：

您不必为此功能使用state：

const location = useLocation();
let active = false;

if (location.pathname === "/Catalogues" || location.pathname === "/About") {
  active = true;
}

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

【讨论】：