React带链接的Button点击时onSubmit与跳转无法同时执行如何解决

问题原因 #

1. 你最初给提交按钮加了href="/"属性，点击按钮时浏览器会直接触发跳转，中断还未执行完成的onSubmit异步请求逻辑，导致二者只能执行一个。
2. 后续修改的代码中直接调用history.push，但没有提前引入React Router对应的导航钩子，这行代码实际会抛出异常，跳转逻辑不会生效。
3. 额外小问题：onChange输入回调里加了e.preventDefault()，不需要给输入框的变更事件加阻止默认行为，可能导致输入异常。

解决步骤 #

1. 修正提交按钮

把按钮上的href="/"属性删掉，只保留提交类型即可：

<Button type="submit" className="button">Registrieren</Button>

2. 引入导航钩子（根据你用的React Router版本二选一）

如果你用的是React Router v5

先在文件顶部引入钩子：

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

然后在Register组件内部顶部声明history实例：

const Register = () => {
  const history = useHistory()
  // 剩下的原有逻辑
}

你现有代码里的history.push("/home")可以正常使用。

如果你用的是React Router v6

v6版本废弃了useHistory，替换为useNavigate，先引入：

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

然后在组件内部顶部声明navigate实例：

const Register = () => {
  const navigate = useNavigate()
  // 剩下的原有逻辑
}

把你代码里的history.push("/home")替换为：

navigate("/home")

3. 删掉onChange里的多余逻辑

把onChange函数里的e.preventDefault()删除即可：

const onChange = e => {
  setInputs({ ...inputs, [e.target.name]: e.target.value });
}

补充说明 #

如果你的需求是发起请求的同时立刻跳转，不需要等注册接口返回结果，可以把跳转逻辑放在await DataServer.post前面即可，不用等请求返回。但更推荐现有写法，等注册成功后再跳转，避免注册失败用户还要退回表单重填的问题。

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