react点击父菜单如何跳转

在React中实现点击父菜单跳转的功能，可以通过以下几种方式实现：

使用事件冒泡处理

通过阻止子元素的默认事件冒泡，确保父元素的点击事件生效。父元素绑定onClick事件并执行跳转逻辑（如history.push或window.location）。

const ParentMenu = ({ children }) => {
  const handleClick = () => {
    // 跳转逻辑
    window.location.href = "/target-path";
  };

  return (
    <div onClick={handleClick}>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          onClick: (e) => e.stopPropagation(),
        });
      })}
    </div>
  );
};

直接绑定路由链接

若使用React Router，可将父菜单包装为Link组件，子菜单通过CSS或事件阻止默认行为。

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

const ParentMenu = () => {
  return (
    <Link to="/target-path">
      <div className="parent">
        <div className="child" onClick={(e) => e.preventDefault()}>
          子菜单
        </div>
      </div>
    </Link>
  );
};

条件性跳转

通过状态判断当前点击区域是否属于父菜单范围，再触发跳转。

const ParentMenu = () => {
  const handleClick = (e) => {
    if (e.target === e.currentTarget) {
      // 仅父元素触发跳转
      navigate("/target-path");
    }
  };

  return <div onClick={handleClick}>父菜单内容</div>;
};

注意事项

• 若子菜单需要独立交互，必须阻止事件冒泡（e.stopPropagation()）。
• 使用React Router时优先考虑Link或useNavigate，避免直接操作window.location。
• 样式需确保父菜单区域可点击（如设置cursor: pointer）。