React Router表单提交时useNavigate导航失效问题求助

问题根源在于表单提交的默认浏览器行为——表单提交后会自动刷新页面，直接打断了React Router的客户端导航逻辑，导致useNavigate的跳转指令被覆盖。

只需在提交函数中阻止表单默认行为即可修复，修改后的代码如下：

const navigate = useNavigate();

function handleForm(event) {
  // 禁用表单默认的页面刷新行为
  event.preventDefault();
  console.log("Form Submitted");
  navigate("/");
}

<Form onSubmit={handleForm}>
...
</Form>

关键说明：

• 给handleForm函数添加event参数
• 调用event.preventDefault()阻止浏览器默认的表单提交刷新动作
• 完成上述操作后再执行navigate，就能正常触发React Router的客户端页面跳转

如果使用的是第三方UI库的表单组件（比如Ant Design的Form），逻辑一致，只需在提交回调中按组件文档要求禁用自动刷新或阻止默认行为即可。

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