React Router V6表单提交时的条件路由跳转问题求助

方案1：用useNavigate在表单提交回调中处理跳转 #

• 确保组件被<Router>或<Routes>包裹（处于路由上下文内），否则useNavigate会报错
• 必须添加e.preventDefault()阻止表单默认刷新行为，否则跳转逻辑会被中断
• 异步请求要正确await，确保拿到后端返回结果后再执行跳转：

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

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    // 调用后端登录接口
    const response = await fetch('/api/login', {
      method: 'POST',
      body: formData,
    });
    const result = await response.text(); // 拿到后端返回的'PASSED'或'FAILED'

    if (result.trim() === 'PASSED') {
      console.log('passed');
      navigate('/dashboard'); // 执行跳转
    } else {
      alert('登录失败');
    }
  };

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

方案2：用React Router v6的action函数处理（官方推荐） #

这种方式不需要手动调用useNavigate，直接在路由配置的action函数中处理提交逻辑和跳转：

// 路由配置文件
import { createBrowserRouter, RouterProvider, redirect } from 'react-router-dom';
import Login from './Login';
import Dashboard from './Dashboard';

const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />,
    action: async ({ request }) => {
      const formData = await request.formData();
      const response = await fetch('/api/login', {
        method: 'POST',
        body: formData,
      });
      const result = await response.text();

      if (result.trim() === 'PASSED') {
        return redirect('/dashboard'); // 直接返回redirect完成跳转
      } else {
        return { error: '登录失败' };
      }
    },
  },
  {
    path: '/dashboard',
    element: <Dashboard />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

然后在Login组件中使用官方的<Form>组件：

import { Form, useActionData } from 'react-router-dom';

function Login() {
  const actionData = useActionData(); // 拿到action返回的错误信息

  return (
    <Form method="POST">
      {actionData?.error && <p style={{color: 'red'}}>{actionData.error}</p>}
      <input type="text" name="username" placeholder="用户名" />
      <input type="password" name="password" placeholder="密码" />
      <button type="submit">登录</button>
    </Form>
  );
}

常见排查要点 #

• 检查控制台是否有报错：比如路由上下文不存在、fetch请求异常（确认后端返回的是纯文本，没有多余空格/换行）
• 确认navigate或redirect是在正确的时机调用：必须在异步请求拿到结果后执行
• 排查是否有其他代码中断了跳转逻辑：比如表单提交后误用了return false

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