单击 Navlink 后无法关闭全屏菜单

Question

问题

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

这里我有一个功能，可以让我在按下 link 之一时关机。我之前提到它只适用于 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>
  );
};

和 links 组件

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

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

单击 Navlink 后无法关闭全屏菜单

Unable to close fullscreen menu after clicking on Navlink

javascript

menu

reactjs

react-router

react-hooks