React中如何实现单按钮同时完成表单提交与react-router跳转？

核心实现思路 #

完全不需要用Link组件包裹按钮，只需要在原有表单提交的回调函数内，按顺序执行两个操作即可：

• 完成原有的表单数据收集、提交、写入state的全部逻辑，这一步要确保完全执行完再触发跳转
• 调用React Router提供的编程式导航方法，完成目标页面的跳转

具体实现（适配React Router v6 版本） #

第一步：引入导航能力 #

在使用表单的组件文件中导入useNavigate Hook，这个方法提供的编程式跳转能力，不会像Link那样提前触发路由切换打断表单逻辑：

import { useNavigate } from 'react-router-dom'

第二步：编写提交处理函数 #

在组件内部定义handleSubmit逻辑，严格按照“数据操作优先、跳转后置”的顺序编写：

function FormComponent() {
  // 初始化导航方法
  const navigate = useNavigate()

  const handleSubmit = (e) => {
    // 阻止表单默认的页面刷新行为
    e.preventDefault()

    // ① 先执行原本的表单提交、存state的业务逻辑
    const formValues = collectFormData(e.target)
    updateGlobalState(formValues) // 替换成实际的状态更新代码

    // ② 数据全部处理完成后，执行路由跳转
    navigate('/component-path', {
      // 如果需要把表单数据通过路由状态传给下一个组件，可在这里携带
      state: {
        submittedFormData: formValues
      }
    })
  }

  // 其余组件业务逻辑
}

第三步：编写组件JSX结构 #

直接移除之前用来包裹按钮的Link组件，把按钮的类型显式标记为submit即可：

<form onSubmit={handleSubmit}>
  {/* 所有表单项内容 */}
  <button type="submit">submit</button>
</form>

原有两种写法失效的原因说明 #

• 纯表单提交的写法：只绑定了数据提交、存state的逻辑，没有接入路由跳转能力，所以提交完成后不会自动切换页面
• Link包裹按钮的写法：Link本质是带路由跳转行为的<a>标签，点击时会优先触发路由切换逻辑，导致Form的onSubmit回调还没执行完，当前表单组件就被卸载，数据无法正常完成提交和传递

实操注意：如果你的表单提交包含异步逻辑（比如需要先请求接口完成持久化再跳转），一定要把navigate的调用放到异步请求的成功回调分支里，避免数据还没处理完成就触发组件切换，导致数据中断。

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