Next.js项目点击移动端汉堡菜单链接后菜单未自动关闭如何解决

问题核心原因 #

控制菜单开合的isOpen状态仅在点击汉堡图标时触发变更，点击菜单项触发Next.js客户端导航时没有同步修改菜单状态，也没有清除body上的navbar-mobile类，因此菜单始终保持打开状态。

第一步：改造MobileMenu组件，接收导航回调 #

给MobileMenu新增onNavigate入参，点击菜单项时触发该回调执行关闭逻辑：

// 新增onNavigate入参
const MobileMenu = ({ onNavigate }) =>  {
  const navigation = [
    { link: '/applications', text: 'Applications' },
    { link: '/multi-media', text: 'Media' },
    { link: '/websites', text: 'Websites' },
    { link: '/mobile-apps', text: 'Mobile' },
    { link: '/support', text: 'Support' },
    { link: '/contact', text: 'Contact' },
    { link: '/', text: 'Login' },
  ];
  return (
      <NavMenuContainer>
        <NavList>
        <div className="flex pb-4 lg:px-6 lg:hidden">
        <Searchbar id="mobile-search" />
      </div>
          {navigation.map(nav => (
            <NavLink key={nav.text}>
              <Link href={nav.link}>
                {/* 点击导航时触发回调关闭菜单 */}
                <a onClick={onNavigate}>
                  {nav.text}
                </a>
              </Link>
            </NavLink>
          ))}
        </NavList>
        </NavMenuContainer>
  );
};
export default MobileMenu

第二步：改造HamburgerMenu组件，新增关闭逻辑并传递回调 #

拆分单独的关闭菜单方法，传递给MobileMenu组件：

export default function HamburgerMenu(props) {
  const [isOpen, setOpen] = useState(false);
  // 新增单独的关闭菜单方法
  const closeMenu = () => {
    document.body.classList.remove("navbar-mobile");
    setOpen(false);
  };
  const toggleMenu = () => {
    let dd = document.body;
    dd.classList.toggle("navbar-mobile");
    setOpen(!isOpen);
  };
  return (
    <Theburger>
      <HamburgerMenuContainer>
        <MenuToggle toggle={toggleMenu} isOpen={isOpen} />
        <MenuContainer
          initial={false}
          animate={isOpen ? "open" : "closed"}
          variants={menuVariants}
          transition={menuTransition}
        >
          <ContentContainer>
            {/* 传递关闭回调给MobileMenu */}
            <MobileMenu isOpen={isOpen} onNavigate={closeMenu} />
         </ContentContainer>
        </MenuContainer>
      </HamburgerMenuContainer>
    </Theburger>
  );
}

注意：如果你的自定义组件NavLink有阻止事件冒泡的配置，需要确保onClick事件能正常传递到内部的a标签，否则回调不会触发。

内容的提问来源于stack exchange，提问作者Stackerme