React表单提交后history.push跳转异常，跳至/?而非/求解决

表单提交时默认的浏览器行为（发起GET请求刷新页面）没有被阻止，导致history.push("/")的客户端跳转被覆盖，浏览器执行了默认的表单提交，从而URL变成/?。

有两种简单的修复方式，任选其一即可：

方式一：在提交处理函数中阻止默认行为 #

修改handleUserSubmitData和Form的onSubmit绑定，让它接收并阻止表单的默认提交事件：

const history = useHistory();
// 接收event参数
const handleUserSubmitData = (event) => {
  // 阻止表单默认提交行为
  event.preventDefault();
  history.push("/");
};

// 直接绑定函数，不要用箭头函数包裹（否则event无法传递）
<Form onSubmit={handleUserSubmitData}>
  {/* 其他表单内容不变 */}
</Form>

方式二：在onSubmit箭头函数中直接阻止默认行为 #

如果不想修改handleUserSubmitData的定义，可以在onSubmit的箭头函数里处理：

<Form onSubmit={(event) => {
  event.preventDefault();
  handleUserSubmitData();
}}>
  {/* 其他表单内容不变 */}
</Form>

• 表单的type="submit"按钮点击后，会自动触发onSubmit事件，同时浏览器会发起默认的HTTP请求（GET方式时会在URL后加?），必须通过event.preventDefault()阻止这个默认行为，才能让React的客户端路由跳转生效。
• 若表单还有其他触发提交的逻辑，也要确保默认行为被正确阻止。

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