单击导航链接后无法关闭全屏菜单答案

【问题标题】：Unable to close fullscreen menu after clicking on Navlink单击导航链接后无法关闭全屏菜单
【发布时间】：2020-12-11 17:10:16
【问题描述】：

问题

当我点击一个链接时，我不想关闭全屏菜单。如果我使用 html 标记 a 并且一切正常，则 NavLink 元素会出现此问题。

这里我有一个功能，当我按下其中一个链接时，我应该能够关闭它。我之前提到它仅适用于 href 标记。

import { useEffect } from "react";

export const useOnClickOutside = (ref, handler) => {
  useEffect(() => {
    const listener = (event) => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      handler(event);
    };
    document.addEventListener("mousedown", listener);
    return () => {
      document.removeEventListener("mousedown", listener);
    };
  }, [ref, handler]);
};

这里是主菜单组件

const MobileMenu = () => {
  const [open, setOpen] = useState(false);
  const ref = useRef();

  useOnClickOutside(ref, () => setOpen(false));

  return (
    <MobileMenuWrapper ref={ref}>
      <BurgerIcon open={open} setOpen={setOpen} />
      <MobileMenuList open={open} setOpen={setOpen}>
        <MenuLinks />
      </MobileMenuList>
    </MobileMenuWrapper>
  );
};

还有链接组件

const MenuLinks = () => {
  return (
    <>
      <ul>
        <li>
          <NavLink to="/"> Home</NavLink>
        </li>

        <li>
          <NavLink to="/albums">Albums</NavLink>
        </li>

        <li>
          <NavLink to="/addAlbum">Add Album</NavLink>
        </li>

        <li>
          <NavLink to="/about">About</NavLink>
        </li>

        <li>
          <NavLink to="/contact">Contact</NavLink>
        </li>
      </ul>
    </>
  );
};

【问题讨论】：

你好，可以分享一些截图吗？
@VikrantBhat 我录制了展示这个问题的视频
drive.google.com/file/d/1ouTCBP_bCaoRpzKExfpYpdBuiG3KwtDu/view
我认为这是因为 href 重新加载网站并丢失状态，NavLink 或 Link 不会重新加载网站，但我不知道如何帮助我。

标签： javascript reactjs menu react-router react-hooks

【解决方案1】：

经过几个小时的搜索错误，我解决了它

const [open, setOpen] = useState(false);

  const ref = useRef();
  // on link click change open to false
  useOutsideClick(ref, () => {
    if (open) setOpen(false);
  });

  return (
    <MobileMenuWrapper ref={ref}>
      <BurgerIcon open={open} setOpen={setOpen} />
      <MobileMenuList open={open} setOpen={setOpen}>
        <MenuLinks />
      </MobileMenuList>
    </MobileMenuWrapper>
  );

和钩子

export const useOutsideClick = (ref, callback) => {
  const handleClick = (e) => {
    if (ref.current && ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

【讨论】：