在路线更改时更改导航栏的样式

Question

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

但是，如果我使用下面的代码，页面会因为重新呈现而变得无响应。如果我在 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>
  </>
);

Answer 1

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

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

编辑：在本地状态下激活似乎非常不必要你可以像这样简单地设置一个常量

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

然后删除useEffect和useState

Answer 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>
  </>
);

在路线更改时更改导航栏的样式

Change the style of navbar on route change

rendering

reactjs

tailwind-css

use-effect