如何在React+Formik实现注册页面提交后跳转至指定页面

核心问题 #

1. NavLink包裹按钮导致验证失效：NavLink本质是封装了<a>标签的路由组件，点击时会直接触发路由跳转，完全跳过表单的验证逻辑——还没等你检查输入是否合法，页面已经跳走了，自然验证就没作用。
2. 按钮无响应：当前按钮没有绑定包含「验证+跳转」逻辑的事件处理函数，或者事件逻辑存在错误，导致点击后没有任何动作。

正确实现方式 #

用React Router的useNavigate钩子（v6+版本）手动控制跳转，先完成表单验证，验证通过后再执行跳转，完美兼顾两者需求。

代码示例（表单场景推荐）

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

function Register() {
  const navigate = useNavigate();

  // 自定义表单验证逻辑
  const checkFormValidity = () => {
    // 示例：检查邮箱和密码是否合法
    const emailInput = document.getElementById('register-email');
    const passwordInput = document.getElementById('register-password');
    
    if (!emailInput.value.trim()) {
      alert('请输入邮箱');
      emailInput.focus();
      return false;
    }
    if (!passwordInput.value.trim() || passwordInput.value.length < 6) {
      alert('密码长度不能少于6位');
      passwordInput.focus();
      return false;
    }
    // 可添加更多验证规则（比如邮箱格式、确认密码匹配等）
    return true;
  };

  // 表单提交处理函数
  const handleFormSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认刷新页面的行为
    if (checkFormValidity()) {
      // 这里可以添加注册API调用逻辑（比如发送请求到后端）
      // 注册成功后跳转目标页面
      navigate('/dashboards/elearning');
    }
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input type="email" id="register-email" placeholder="请输入邮箱" />
      <input type="password" id="register-password" placeholder="请设置密码" />
      {/* 按钮类型设为submit，绑定表单的onSubmit事件 */}
      <button type="submit">完成注册</button>
    </form>
  );
}

export default Register;

非表单场景的按钮处理

如果你的注册按钮不在表单内，直接给按钮绑定点击事件即可：

// 点击事件处理函数
const handleRegisterClick = () => {
  if (checkFormValidity()) {
    // 执行注册逻辑
    navigate('/dashboards/elearning');
  }
};

// 按钮渲染
<button onClick={handleRegisterClick}>注册</button>

关键注意点 #

• 永远不要用路由组件（NavLink/Link）直接包裹表单提交按钮，这类组件的跳转逻辑会优先于表单验证执行。
• 必须通过e.preventDefault()阻止表单的默认提交行为，避免页面刷新丢失状态。
• 验证逻辑要放在跳转前执行，确保只有合法的输入才会触发页面跳转。

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