React Router中useNavigate钩子无法跳转路由求助

核心问题定位 #

你的自定义Button组件没有接收并绑定父组件传递的onClick事件处理器，导致点击Delete按钮时，handleDelete函数根本没有被调用，自然不会触发导航。

解决方案：修复Button组件 #

修改Button组件，将父组件传入的onClick属性绑定到原生button元素上：

function Button(props) {
  const buttonClassName = `bg-${props.color} hover:bg-${props.hoverColor} text-white font-bold py-2 px-4 rounded mr-2`;

  return (
    // 绑定父组件传入的onClick事件
    <button className={buttonClassName} onClick={props.onClick}>
      {props.name}
    </button>
  );
}

export default Button;

额外修正点 #

你当前handleDelete函数里写的是跳转到根路径navigate('/')，但你描述的需求是跳转到/DeleteNotes，记得同步修改：

const handleDelete = () => {
  navigate('/DeleteNotes'); // 替换原来的 '/'
};

验证步骤 #

1. 保存修改后的组件代码
2. 重启开发服务器（若需要）
3. 点击Delete按钮，检查是否成功跳转到/DeleteNotes路由

内容的提问来源于stack exchange，提问作者med hedi ben salah