Блог

Я использую этот код для изменения стиля навигационной панели, когда она перенаправляется на разные страницы.

Но если я использую приведенную ниже кодовую страницу, она перестает отвечать из-за повторного рендеринга. Если я передам пустое [] или передам местоположение в качестве второго элемента в 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>
  </>
);
 

Вам нужно установить активное, но что более важно, местоположение в зависимости от эффекта использования

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

Редактировать: кажется очень ненужным иметь активность в локальном состоянии
, вы можете просто установить константу следующим образом

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

Затем удалите эффект использования и состояние использования

Вам не обязательно использовать 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>
  </>
);