解决useMutation提交react-hook-form后页面刷新及跳转问题

问题原因 #

表单提交后页面自动刷新，核心是未在异步提交成功后处理跳转逻辑。react-hook-form的handleSubmit已默认拦截表单默认刷新行为，但需要配合React Query的异步回调完成跳转动作。

具体修改步骤 #

1. 补充必要依赖导入 #

在CreateUser.jsx中添加axios和路由跳转钩子：

import CommonForm from "../components/commonform";
import { useMutation } from "react-query";
import axios from "axios"; // 补充axios导入（你代码中实际已使用但未显式导入）
import { useNavigate } from "react-router-dom"; // 导入路由跳转工具

2. 初始化路由跳转函数 #

在组件内获取navigate实例：

const CreateUser = () => {
  const navigate = useNavigate(); // 初始化跳转函数
  // ... 其余代码
};

3. 配置Mutation成功回调 #

给useMutation添加onSuccess回调，在数据写入成功后执行页面跳转：

const { mutate } = useMutation(addUser, {
  onSuccess: () => {
    // 替换为你需要跳转的目标路径，比如用户列表页
    navigate("/users");
  },
  // 可选：添加错误处理
  onError: (error) => {
    console.error("添加用户失败:", error.message);
  }
});

4. 确认表单逻辑无需修改 #

CommonForm.jsx中的handleSubmit已自动阻止表单默认刷新行为，保持原有代码即可。

修改后的完整CreateUser.jsx代码 #

import CommonForm from "../components/commonform";
import { useMutation } from "react-query";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const addUser = async (data) => {
  let res = await axios.post("http://localhost:1000/user", data);
  return res;
};

const CreateUser = () => {
  const navigate = useNavigate();
  const { mutate } = useMutation(addUser, {
    onSuccess: () => {
      navigate("/users"); // 跳转到目标页面
    },
    onError: (error) => {
      console.error("添加用户失败:", error.message);
    }
  });  

  const submitHandler = (data) => {
    console.log("Data submitted from the form", data);
    mutate(data);
  };
 
  return (
    <div>
      <CommonForm view="createForm" submitHandler={submitHandler} />
    </div>
  );
};

export default CreateUser;

关键说明 #

• 若使用React Router v5版本，将useNavigate替换为useHistory即可
• onSuccess回调会在异步请求完全成功后触发，确保数据已写入json-server再跳转
• react-hook-form的handleSubmit已内置阻止表单默认刷新逻辑，无需额外调用e.preventDefault()

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