Link组件嵌套CustomButton时重定向异常，如何实现验证后跳转？

问题根源在于你用Link包裹按钮后，点击时Link的跳转逻辑会优先触发，导致验证代码还没执行就直接跳走了。换个思路，移除外层的Link，改用React Router的useNavigate钩子手动控制跳转时机即可。

步骤1：导入useNavigate钩子 #

从react-router-dom中引入该钩子：

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

步骤2：在组件内初始化跳转函数 #

const navigate = useNavigate();

步骤3：修改JSX结构，移除Link包裹 #

直接渲染CustomButton，把原Link的样式迁移到按钮上（如果CustomButton支持接收style属性）：

<CustomButton text="Login" onClick={handleSubmit} style={linkStyles} />

如果CustomButton不支持传递style，可以给按钮套一层div来挂载样式：

<div style={linkStyles}>
  <CustomButton text="Login" onClick={handleSubmit} />
</div>

步骤4：更新handleSubmit函数，验证通过后手动跳转 #

修改处理函数，在验证逻辑通过后调用navigate完成跳转：

const handleSubmit = (e: any) => {
  // 阻止原生按钮的默认行为（如果CustomButton封装了原生button）
  e.preventDefault();

  if (email !== user.email || password !== user.password) {
    setError("Please make sure you have the correct email or password");
  } else {
    setError("");
    // 验证通过，执行跳转
    navigate('/dashboard');
  }
};

关键注意点 #

确保你的CustomButton组件正确将onClick事件传递给内部的原生按钮，比如CustomButton的实现需包含：

const CustomButton = ({ text, onClick, style }) => {
  return (
    <button onClick={onClick} style={style}>
      {text}
    </button>
  );
};

如果没有正确传递onClick，你的验证逻辑根本不会触发。

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