如何解决React中useMutation成功后useNavigate导航自动返回的问题

问题根源 #

你的提交按钮是type="submit"，点击后会触发表单默认提交行为，导致页面刷新。这就出现了两种异常：

• 用onSuccess或mutation.isSuccess跳转时，页面先跳转到目标页，随即因刷新回到表单页
• 直接在handleClick里跳转，请求还未完成就切换页面，导致后端变更无法同步到前端列表

修复方案 #

方案1：修改按钮类型为button #

将按钮的type="submit"改为type="button"，彻底避免触发表单默认提交：

// BlogPostForm组件中的按钮部分
<button
    type={"button"}
    className={"blog-post-submit-btn"}
    onClick={() => handleClick()}
>Submit</button>

方案2：在点击事件中阻止默认行为 #

若需保留type="submit"，可在handleClick中接收事件参数并阻止默认行为：

// 调整handleClick函数
const handleClick = (e) => {
    e.preventDefault();
    mutation.mutate({
        title: title,
        body: content,
        author: author,
        date: getDate()
    });
}

// 按钮绑定修改
<button
    type={"submit"}
    className={"blog-post-submit-btn"}
    onClick={handleClick}
>Submit</button>

方案3：通过表单onSubmit事件处理（推荐） #

更规范的做法是将逻辑绑定到表单的onSubmit事件，同时阻止默认行为：

// 新增handleSubmit函数
const handleSubmit = (e) => {
    e.preventDefault();
    mutation.mutate({
        title: title,
        body: content,
        author: author,
        date: getDate()
    });
}

// 表单标签修改
<form className={"blog-post-form"} onSubmit={handleSubmit}>
    {/* 原有表单内容不变 */}
    <button
        type={"submit"}
        className={"blog-post-submit-btn"}
    >Submit</button>
</form>

验证效果 #

修改完成后，useMutation的onSuccess回调会正常触发：请求完成后跳转到首页，不会因页面刷新返回表单页，同时新提交的博客内容会正常显示在首页列表中。

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