React中实现登录按钮同时提交表单并跳转页面的问题

按钮在表单内的实现（推荐） #

直接利用表单的onSubmit事件统一处理提交和跳转，逻辑更清晰：

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

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

  const handleSubmit = async (e) => {
    e.preventDefault(); // 阻止页面默认刷新
    const formData = new FormData(e.target);
    
    try {
      // 发送登录请求
      const res = await fetch('/api/login', {
        method: 'POST',
        body: formData
      });
      
      if (res.ok) {
        // 登录成功后跳转
        navigate('/dashboard');
      } else {
        console.error('登录失败：', await res.text());
      }
    } catch (err) {
      console.error('请求出错：', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" required placeholder="用户名" />
      <input type="password" name="password" required placeholder="密码" />
      <button type="submit">登录</button> {/* 必须设置type="submit" */}
    </form>
  );
}

按钮在表单外的实现 #

通过useRef获取表单实例，手动处理数据提交：

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

function Login() {
  const navigate = useNavigate();
  const formRef = useRef(null);

  const handleLogin = async () => {
    if (!formRef.current) return;
    
    const formData = new FormData(formRef.current);
    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        body: formData
      });
      
      if (res.ok) {
        navigate('/dashboard');
      } else {
        console.error('登录失败：', await res.text());
      }
    } catch (err) {
      console.error('请求出错：', err);
    }
  };

  return (
    <div>
      <form ref={formRef}>
        <input type="text" name="username" required placeholder="用户名" />
        <input type="password" name="password" required placeholder="密码" />
      </form>
      <button type="button" onClick={handleLogin}>登录</button>
    </div>
  );
}

跳转逻辑失效排查 #

• 确认组件已被<BrowserRouter>（或其他Router组件）包裹，useNavigate仅在Router上下文内生效
• 检查登录请求是否成功：若请求失败（比如401、网络错误），跳转逻辑不会执行，需在catch或res.ok判断里处理错误
• 若使用react-router v5，需替换useNavigate为useHistory，跳转写法为history.push('/dashboard')
• 核对跳转路径是否与路由配置一致，避免拼写错误

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