表单提交跳转Success页面时未校验直接重定向的问题求助

嘿，我一眼就看出问题所在了——你用<Link>直接包裹了提交按钮，这会导致点击按钮时优先触发React Router的路由跳转，完全跳过了表单的校验逻辑和原生的submit事件，自然就出现了没校验就跳转的情况。

下面给你两种靠谱的解决办法，推荐用第一种，更符合表单的常规处理逻辑：

方法一：移除Link，在表单onSubmit中处理校验与跳转 #

这是最标准的表单处理方式，把路由跳转逻辑放到表单的提交事件里，先校验再跳转：

1. 首先从react-router-dom导入useNavigate钩子：

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

2. 在你的表单组件中初始化navigate实例，并编写提交处理函数：

const YourFormComponent = () => {
  const navigate = useNavigate();
  
  // 表单校验与提交逻辑
  const handleFormSubmit = (e) => {
    e.preventDefault(); // 阻止浏览器默认的表单提交行为
    
    // 这里执行你的表单校验逻辑
    // 比如检查输入字段是否为空、格式是否正确等
    const isFormValid = /* 替换成你的校验判断，比如检查所有必填字段 */;
    
    if (isFormValid) {
      // 校验通过，跳转到Success页面
      navigate('/success');
    } else {
      // 校验不通过，给用户提示错误信息
      // 可以用alert、或者更新状态在页面上显示错误
      alert('请检查表单填写是否符合要求');
    }
  };

  return (
    {/* 给表单绑定onSubmit事件 */}
    <form onSubmit={handleFormSubmit}>
      {/* 你的表单输入字段、校验提示等内容 */}
      
      {/* 直接使用提交按钮，不需要包裹Link */}
      <Button variant="primary" type="submit">Submit</Button>
    </form>
  );
};

方法二：保留Link但手动拦截跳转（不推荐，仅作参考） #

如果因为某些特殊原因你一定要保留<Link>，可以在按钮的点击事件里先做校验，通过后再手动跳转，同时阻止Link的默认行为：

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

const YourFormComponent = () => {
  const navigate = useNavigate();
  
  const handleButtonClick = (e) => {
    e.preventDefault(); // 阻止Link的默认跳转行为
    
    // 执行表单校验逻辑
    const isFormValid = /* 你的校验判断 */;
    
    if (isFormValid) {
      // 校验通过后手动跳转
      navigate('/success');
    } else {
      // 提示错误
      alert('表单填写有误，请检查');
    }
  };

  return (
    <form>
      {/* 你的表单字段 */}
      
      <Link to="/success" onClick={handleButtonClick}>
        <Button variant="primary" type="button">Submit</Button>
      </Link>
    </form>
  );
};

为什么原来的写法不行？ #

<Link>组件的点击事件会被React Router优先处理，当你点击按钮时，浏览器还没来得及触发表单的submit事件和你的校验逻辑，就已经被重定向到/success页面了，这就是问题的核心。

推荐优先用第一种方法，它更贴合表单的原生行为，代码也更易维护。另外记得确保你的校验逻辑能正确覆盖所有必填项和格式要求哦～

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