React表单提交成功后如何重定向到站点根路径？

核心问题说明 #

你当前代码跳转不生效的最常见原因是react-router-dom版本不匹配：目前主流的v6版本已经移除了useHistory API，替换为useNavigate。你的表单提交场景直接使用路由提供的导航API是最优解，不需要额外维护状态，逻辑最简洁。

适配实现方案 #

1. react-router-dom v6 版本（当前主流版本）

直接替换原有的useHistory相关逻辑即可，修改后的核心代码如下：
首先替换导入语句：

import { useNavigate } from "react-router-dom";

组件内替换导航实例声明：

// 把原来的 const history = useHistory() 替换为下面的代码
const navigate = useNavigate();

修改handleSubmit逻辑，增加响应校验避免提交失败也执行跳转，同时补充表单清空逻辑：

function handleSubmit(e) {
  e.preventDefault();
  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: encode({ "form-name": "contact", name, email, message }),
  })
  .then((response) => {
    // 校验服务器响应是否正常
    if (!response.ok) throw new Error("提交失败")
    console.log('Email sent');
    // 执行跳转
    navigate('/');
    // 兜底清空表单内容，避免跳转失败内容残留
    setName('');
    setEmail('');
    setMessage('');
  })
  .catch((error) => {
    console.log(error);
    alert("消息发送失败，请稍后重试");
  });
}

2. react-router-dom v5 版本

如果确认你的项目用的是v5版本，原来的history.push('/')逻辑本身没有问题，只需要给handleSubmit加上上面的响应校验逻辑即可，绝大多数情况是fetch收到了服务器错误响应但没有拦截，导致你以为跳转逻辑失效。

三种跳转方案适配性说明 #

• 导航API（useHistory/useNavigate）：最适配你的场景，事件触发后直接调用即可，代码量最少，逻辑最直观
• Redirect组件/状态变量控制跳转：更适合路由守卫、权限校验这类需要根据状态条件渲染跳转的场景，你这个表单提交的场景用这类方案需要额外维护一个redirect状态，多了不必要的逻辑，不推荐使用。

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