本文详解如何在 React（配合 react-hook-form 和 axios）中调用 FormSubmit.co API 后，手动触发页面跳转，解决默认不重定向的问题。核心在于理解 handleSubmit 的自动 preventDefault() 行为，并在成功响应后主动执行导航。
本文详解如何在 react（配合 react-hook-form 和 axios）中调用 formsubmit.co api 后，手动触发页面跳转，解决默认不重定向的问题。核心在于理解 `handlesubmit` 的自动 `preventdefault()` 行为，并在成功响应后主动执行导航。
在 React 应用中集成 formsubmit.co 时，许多开发者会遇到一个典型问题：点击提交按钮后，表单数据成功发送，但页面并未像官网测试表单那样自动跳转到指定的成功页（如 https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/thanks 或自定义 URL）。这并非 API 失效，而是由 React 的事件处理机制与 HTML 原生表单行为差异导致的。
? 根本原因：react-hook-form 的 handleSubmit 会阻止默认跳转
HTML 原生 <form method="POST" action="https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/el/xxx"> 提交时，浏览器会自动发起 POST 请求并重定向至 action 指定地址（即 formsubmit.co 的响应页）。而 react-hook-form 的 handleSubmit 是一个封装后的事件处理器，其内部始终调用 e.preventDefault() —— 这是为了防止页面刷新、支持异步校验和自定义逻辑，但也同时禁用了原生跳转行为。
你当前的代码中：
const handleSubmit = async () => { /* axios 发送数据 */ };
<Btn click={handleSubmit}>Order</Btn>完全绕过了 <form onSubmit> 流程，属于“手动提交”，自然不会触发任何跳转。
即使你后续在 <form onSubmit={handleSubmit(onSubmit)}> 中使用了 react-hook-form 的 handleSubmit，它也仅负责调用你的 onSubmit 回调，不会恢复原生跳转逻辑。
✅ 正确解法：在请求成功后主动导航
FormSubmit.co 的 API（POST https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/el/{your-id}）本质是无状态的 Webhook 接口，它接收数据并返回 JSON 响应（如 { "message": "Message sent successfully" }），不负责控制客户端跳转。因此，跳转逻辑必须由你显式实现：
✅ 方案一：跳转到外部 URL（如 FormSubmit.co 成功页）
const handleSubmit = async () => {
const emailData = {
attachment: 'Order received',
html: telValue,
// ⚠️ 注意：formsubmit.co 要求字段名与表单 input name 一致
// 若需保留原始表单结构，建议直接序列化整个 form data（见下方提示）
};
try {
const response = await axios.post('https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/el/cimewa', emailData);
console.log('Email sent:', response.data);
// ✅ 手动跳转到 FormSubmit.co 默认感谢页（或你配置的 redirect URL）
window.location.href = 'https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/thanks';
// 或跳转到自定义成功页（需确保该页已配置在 formsubmit.co 后台）
// window.location.href = 'https://yourdomain.com/thank-you';
} catch (error) {
console.error('Submission failed:', error.response?.data || error.message);
// 可在此处显示错误提示（如 Toast 或表单内 error message）
}
};✅ 方案二：跳转到 React Router 内部路由（推荐用于 SPA）
import { useNavigate } from 'react-router-dom';
const InputPhone = (props) => {
const navigate = useNavigate(); // ✅ 获取导航函数
const { control } = useForm();
const [telValue, setTelValue] = useState('');
const handleSubmit = async () => {
const emailData = {
attachment: 'Order received',
html: telValue,
};
try {
await axios.post('https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/el/cimewa', emailData);
// ✅ 导航到内部路由（无页面刷新）
navigate('/thank-you', {
state: { submitted: true }
});
} catch (error) {
console.error('Submission failed:', error);
// 处理错误...
}
};
return <Btn onClick={handleSubmit}>Order</Btn>;
};⚠️ 重要注意事项
-
字段命名必须匹配：formsubmit.co 严格依赖 name 属性映射字段。若你用 html: telValue 发送，邮件正文只会显示手机号；但若想让表单数据被正确解析为字段（如 phone=123），请确保 emailData 的 key 与你在 formsubmit.co 后台设置的字段名一致（例如 phone, email, message），或直接使用 FormData 对象：
const formData = new FormData(); formData.append('phone', telValue); formData.append('attachment', 'Order received'); // 然后 axios.post(url, formData, { headers: {} }) 不要混淆两种提交方式：
❌ 不要混用 react-hook-form 的 <form onSubmit> 和独立的 axios 提交函数；
✅ 推荐统一使用 handleSubmit 包裹的回调，并在其中执行 axios + 导航逻辑。错误处理不可省略：网络失败、4xx/5xx 响应、CORS 限制等都可能导致 axios.post 抛错。务必在 catch 块中提供用户友好的反馈（如 alert、Toast 或表单下方错误提示）。
CORS 安全提示：formsubmit.co 允许前端直连，但部分环境（如某些企业网络）可能拦截跨域请求。生产环境建议搭配后端代理（如 Next.js API Route）增强稳定性与安全性。
✅ 总结
| 场景 | 解决方案 |
|---|---|
| 需跳转到 formsubmit.co/thanks 或其他外链 | 使用 window.location.href = '...' |
| 需跳转到 React Router 内部页面（如 /success） | 使用 useNavigate()（v6+）或 useHistory()（v5） |
| 需保证字段被 formsubmit.co 正确识别 | 严格按 name 键名构造 emailData，或改用 FormData |
只要理解 preventDefault() 的存在，并在 axios 成功回调中主动导航，就能完美复现官网表单的跳转体验。无需修改 formsubmit.co 配置，也不依赖额外库 —— 纯 React 逻辑即可搞定。
