Next.js移动端导航点击链接后无法关闭的技术问题

问题核心原因 #

你当前代码同时混用了React的useState状态管理和原生JavaScript的DOM操作，这会导致React内部状态与实际DOM状态不一致；另外导航链接点击时没有触发菜单关闭的状态更新，所以点击后菜单依然保持展开状态。

解决方案步骤 #

1. 移除原生JS的DOM操作代码：完全依赖React状态控制菜单显示，避免状态冲突。
2. 给导航链接添加关闭逻辑：每个导航链接绑定点击事件，点击时将isHidden设为true以关闭菜单。
3. 优化菜单类名逻辑：简化菜单的class判断，避免重复的hidden类导致样式冲突。
4. 动态切换SVG图标：根据isHidden状态切换汉堡图标和叉号的显示，提升交互体验。

修改后的完整代码 #

import { useState } from 'react';
import Link from 'next/link';

const Navbar = () => {
  const [isHidden, setIsHidden] = useState(true);

  // 点击链接时关闭菜单的通用函数
  const handleLinkClick = () => {
    setIsHidden(true);
  };

  return (
    <>
      <button 
        onClick={() => setIsHidden(c => !c)} 
        className="menu-button md:hidden rounded-lg focus:outline-none focus:shadow-outline"
      >
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          {/* 根据isHidden状态显示汉堡或叉号 */}
          <path 
            className={isHidden ? '' : 'hidden'}
            strokeLinecap="round" 
            strokeLinejoin="round" 
            d="M4 6h16M4 12h16M4 18h16" 
          />
          <path 
            className={isHidden ? 'hidden' : ''}
            fillRule="evenodd" 
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" 
            clipRule="evenodd" 
          />
        </svg>
      </button>
      
      {/* 简化菜单类名：用isHidden控制hidden类，移除重复的hidden */}
      <nav className={`mobile-menu flex-col flex-grow pb-4 md:pb-0 md:flex md:justify-end md:flex-row flex ${isHidden ? 'hidden' : ''}`}>
        <Link href="/about">
          <a 
            className="md:mt-0 mt-3 px-3 py-2"
            onClick={handleLinkClick}
          >
            About
          </a>
        </Link>
        <Link href="/about-us">
          <a 
            className="md:mt-0 mt-3 px-3 py-2"
            onClick={handleLinkClick}
          >
            Boost
          </a>
        </Link>
        <Link href="/about-us">  
          <a 
            className="md:mt-0 mt-3 px-3 py-2"
            onClick={handleLinkClick}
          >
            Technology
          </a>
        </Link>
        <Link href="/about-us">  
          <a 
            className="md:mt-0 mt-3 px-3 py-2"
            onClick={handleLinkClick}
          >
            Contact
          </a>
        </Link>
      </nav>
    </>
  );
};

export default Navbar;

关键改动说明 #

• 删除了单独的原生JS代码，所有交互通过React状态控制，确保状态与UI同步。
• 新增handleLinkClick函数，每个导航链接点击时调用该函数，将isHidden设为true，自动关闭菜单。
• 调整SVG显示逻辑：菜单隐藏时显示汉堡图标，菜单展开时显示叉号，符合用户预期的交互反馈。
• 简化菜单class列表，移除重复的hidden类，仅通过isHidden状态控制是否添加hidden类，避免样式冲突。

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