React中使用hcOffcanvasNav时Logout按钮Onclick事件失效求助

我用hcOffcanvasNav库开发导航栏，点击Logout按钮后页面直接跳转到首页，但绑定的onClick回调函数完全没执行——不管是Link上的console.log('click')，还是span上的handleClick都没输出日志。想排查是库、CSS还是代码逻辑的问题，相关代码如下：

import hcOffcanvasNav from "hc-offcanvas-nav";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import {
  DarkHomeInviteFriendsIcon,
  DarkHomeLogoutIcon,
  DarkHomeMenuIcon,
  DarkHomeNotificationsIcon,
  DarkHomeSettingsIcon,
  DarkHomeTripIcon,
  DarkHomeWalletIcon,
  DarkImgProfileImage,
  HomeInviteFriendsIcon,
  HomeLogoutIcon,
  HomeMenuIcon,
  HomeNotificationsIcon,
  HomeSettingsIcon,
  HomeTripIcon,
  HomeWalletIcon,
  ImgProfileImage,
} from "../../../assets/TaxiModeImage";
import { Link } from "react-router-dom";

const Navigation = ({ setLogoutModal }) => {
  const themeGetter = useSelector((state) => state.theme);

  const [isMenuOpen, setIsMenuOpen] = useState(false);
  console.log("in navigation");
  useEffect(() => {
    const Nav = new hcOffcanvasNav("#main-nav", {
      customToggle: ".toggle",
      open: isMenuOpen,
      swipeGestures: false,
    });

    return () => Nav.close();
  }, [isMenuOpen]);

  const toggleMenu = () => {
    setIsMenuOpen((prev) => !prev);
  };

  const handleClick = () => {
    console.log("Logout button clicked");
  };
  return (
    <nav id="main-nav">
      <ul className="second-nav">
        <li>
          <Link className="sidebar-user d-flex align-items-center p-3 border-0 mb-0    rounded-4">
            <img
              src={themeGetter ? DarkImgProfileImage : ImgProfileImage}
              className="rounded-pill me-3 ch-50"
              alt="#"
            />
            <div>
              <h4
                className={`mb-0 ${
                  themeGetter ? "txt-white-dark" : "tm-secondary-txt-color"
                } roboto-text`}
              >
                Hello, Brayden
              </h4>
              <small className="tm-primary-txt-color roboto-text">
                Edit account
              </small>
              <br />
            </div>
          </Link>
        </li>
        {/* 省略其他导航项 */}
      </ul>
      <ul className="bottom-nav">
        <li>
          <Link
            className="txt-logout"
            onClick={() => {
              console.log("click");
            }}
          >
            {themeGetter ? (
              <DarkHomeLogoutIcon className="me-3" />
            ) : (
              <HomeLogoutIcon className="me-3" />
            )}
            <span className="txt-logout" onClick={handleClick}>
              &nbsp;Logout
            </span>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

问题排查与解决方案 #

1. 核心原因：hcOffcanvasNav的DOM重构导致React事件绑定失效

hcOffcanvasNav会将原始的<nav>结构完全重构成它自身的DOM结构，React绑定的onClick事件是挂载在初始虚拟DOM节点上的，DOM重构后这些事件会直接丢失。而<Link>是react-router-dom的组件，默认行为就是跳转页面，所以点击后直接跳走，根本没机会触发你的回调。

2. 验证方式

打开浏览器开发者工具，查看渲染后的Logout按钮DOM结构，会发现hcOffcanvasNav生成了全新的包裹元素，原始<Link>和<span>上的事件绑定已经不存在了。

3. 解决方案：使用hcOffcanvasNav自带的事件回调

这个库提供了onItemClick事件，专门用于处理导航项的点击，用它来替代React的onClick：

import { useNavigate } from 'react-router-dom'; // 导入useNavigate用于跳转

const Navigation = ({ setLogoutModal }) => {
  const navigate = useNavigate();
  // ...其他代码

  useEffect(() => {
    const Nav = new hcOffcanvasNav("#main-nav", {
      customToggle: ".toggle",
      open: isMenuOpen,
      swipeGestures: false,
      onItemClick: (data) => {
        // 判断点击的是Logout链接
        if (data.link.classList.contains('txt-logout')) {
          handleClick();
          data.event.preventDefault(); // 阻止Link默认跳转
          // 这里可以手动控制跳转时机，比如先弹确认框再跳转
          // navigate('/');
        }
      }
    });

    return () => Nav.close();
  }, [isMenuOpen]);

  // ...其他代码
};

4. 备选方案：替换Link为普通元素

如果不想依赖库的事件，把<Link>换成<div>或<button>，自己控制点击逻辑和跳转，避免被hcOffcanvasNav的DOM重构影响：

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

const Navigation = ({ setLogoutModal }) => {
  const navigate = useNavigate();
  // ...其他代码

  const handleClick = () => {
    console.log("Logout button clicked");
    // 这里处理Logout逻辑，比如弹出模态框
    setLogoutModal(true);
    // 或者直接跳转首页
    // navigate('/');
  };

  return (
    // ...其他代码
    <ul className="bottom-nav">
      <li>
        <div 
          className="txt-logout d-flex align-items-center"
          onClick={handleClick}
        >
          {themeGetter ? (
            <DarkHomeLogoutIcon className="me-3" />
          ) : (
            <HomeLogoutIcon className="me-3" />
          )}
          <span className="txt-logout">
            &nbsp;Logout
          </span>
        </div>
      </li>
    </ul>
    // ...其他代码
  );
};

5. CSS排查

检查.txt-logout或其父元素是否设置了pointer-events: none，这个属性会完全阻止点击事件触发。可以在开发者工具的Elements面板中查看元素的CSS属性，确认pointer-events为默认的auto。

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