React中点击Link后SlideMenu无法关闭的技术问题咨询

这种情况我之前开发移动端项目时也碰到过！核心问题就是路由跳转后，菜单的isOpen状态没有被同步重置，导致组件还保持着"打开"的状态，所以菜单依然占满屏幕。下面给你几个针对性的解决方案：

1. 监听路由变化自动关闭菜单 #

利用React Router的useLocation钩子监听路由路径变化，一旦路径改变，就把isOpen设为false。这个方法能覆盖所有路由跳转场景（不管是点击Link还是通过其他方式跳转）。

比如在你的Header.js里加入这段代码：

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const location = useLocation();

  // 路由切换时自动重置菜单状态
  useEffect(() => {
    setIsOpen(false);
  }, [location.pathname]); // 依赖路径变化触发

  // 其他菜单展开/收起逻辑...
}

2. 给Link组件添加点击关闭逻辑 #

除了全局监听路由，还可以在每个跳转的Link组件上直接添加点击事件，主动触发菜单关闭。这种方式更直接，能确保用户点击Link的瞬间就关闭菜单。

在MobileNav.js里修改Link组件：

import { Link } from 'react-router-dom';

function MobileNav({ isOpen, setIsOpen }) {
  return (
    <nav className="mobile-nav">
      <Link 
        to="/home" 
        onClick={() => setIsOpen(false)}
      >
        首页
      </Link>
      <Link 
        to="/about" 
        onClick={() => setIsOpen(false)}
      >
        关于我们
      </Link>
      {/* 其他导航项 */}
    </nav>
  );
}

3. 检查SlideMenu的样式关联逻辑 #

最后别忘了确认SlideMenu.js里的样式是否正确绑定了isOpen状态。确保当isOpen为false时，菜单有正确的滑出动画，比如：

.slide-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  /* 默认隐藏：滑出屏幕左侧 */
  transform: translateX(-100%);
}

.slide-menu.open {
  /* 显示状态：滑入屏幕 */
  transform: translateX(0);
}

然后在SlideMenu组件里根据isOpen添加对应的类名：

function SlideMenu({ isOpen }) {
  return (
    <div className={`slide-menu ${isOpen ? 'open' : ''}`}>
      {/* 菜单内容 */}
    </div>
  );
}

把这几个步骤结合起来，应该就能彻底解决路由跳转后菜单不隐藏的问题了，你可以试试！

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