React中点击处理函数阻止NavLink跳转的问题解决

你的问题核心是点击处理函数存在语法错误，导致函数执行中断，进而影响了NavLink的默认跳转行为，同时DOM操作的写法也不正确。以下是具体修复方案：

1. 修正DOM操作的语法错误 #

原代码中修改元素显示状态的写法不符合JS规范，正确的DOM样式修改方式是通过style.display属性赋值：

const handleClick = () => {
  // 隐藏nav容器
  const navEl = document.getElementById("nav");
  if (navEl) {
    navEl.style.display = "none";
  }
  // 取消侧边菜单复选框的选中状态
  const sideMenuEl = document.getElementById("side-menu");
  if (sideMenuEl) {
    sideMenuEl.checked = false;
  }
};

2. 确保默认跳转行为正常触发 #

NavLink的页面跳转属于浏览器原生行为，只要你的点击处理函数中没有调用e.preventDefault()，且函数执行过程中没有报错，跳转逻辑就会自动执行。修复语法错误后，函数能正常运行完毕，NavLink就能完成跳转。

更符合React范式的优化方案 #

如果你想避免直接操作DOM（React推荐的编程方式），可以用组件状态来控制菜单的显示：

import { useState } from 'react';
import { NavLink } from 'react-router-dom';

const YourComponent = () => {
  const [isMenuVisible, setIsMenuVisible] = useState(true);

  const handleClick = () => {
    setIsMenuVisible(false);
    // 处理复选框状态（若为原生元素可保留DOM操作，也可改为状态控制）
    const sideMenuEl = document.getElementById("side-menu");
    if (sideMenuEl) {
      sideMenuEl.checked = false;
    }
  };

  return (
    <>
      {/* 通过状态控制菜单显示 */}
      <div id="nav" style={{ display: isMenuVisible ? 'block' : 'none' }}>
        {/* 菜单内容 */}
      </div>
      <ul className="drop-content">
        <li><NavLink onClick={handleClick} to="/servicios/distribucion-de-peliculas">Distribución de películas</NavLink></li>
        <li><NavLink onClick={handleClick} to="/servicios/produccion-de-audiovisuales">Producción de audiovisuales</NavLink></li>
        <li><NavLink onClick={handleClick} to="/servicios/publicidad-en-cines">Publicidad en cines</NavLink></li>
        <li><NavLink onClick={handleClick} to="/servicios/laboratorio-digital">Laboratorio digital</NavLink></li>
      </ul>
    </>
  );
};

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