React登录表单首次提交不跳转，需多次提交才能生效是什么原因？

问题根因分析 #

• 最常见的原因是history实例不匹配：你单独初始化的history实例，没有和项目中React Router使用的实例保持一致。如果你直接用了<BrowserRouter>组件，它内部会单独创建一个history实例，和你导出的实例互不关联，所以外部调用history.push时路由层没有监听到变更，只有后续组件重渲染时才会同步状态，就会出现多次提交才跳转的问题。
• 第二个高频原因是跳转顺序错误导致路由守卫拦截：你当前的代码逻辑是先执行history.push("/")跳转首页，再更新Redux的登录状态。如果你的首页/路由层做了登录态校验，跳转时Redux还没更新登录状态，会被路由守卫直接拦截回登录页，此时你才完成登录态更新，后续再次提交时已经是登录态，才会跳转成功。

修复方案 #

1. 统一history实例
   不要使用React Router自带的<BrowserRouter>组件，改为传入你自定义的history实例：

• 如果是React Router v5版本：

import { Router } from 'react-router-dom'
import history from './你存放history的文件路径'

// 根组件渲染处
ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
)

• 如果是React Router v6版本：

import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
import history from './你存放history的文件路径'

// 根组件渲染处
ReactDOM.render(
  <HistoryRouter history={history}>
    <App />
  </HistoryRouter>,
  document.getElementById('root')
)

2. 调整登录逻辑执行顺序
   先更新Redux登录状态，再执行跳转，避免被路由守卫拦截：

async function login(e) {
  e.preventDefault()
  const response = await axios.post("http://localhost:3001/login", {
    email,
    password
  }, {
    withCredentials: true
  })
  if (response.data.auth) {
    // 先更新登录状态
    store.dispatch({
      type: "setUser",
      payload: response.data
    })
    // 状态更新完成后再跳转
    history.push("/")
  }
}

3. 补充校验：检查你的路由守卫逻辑，确保登录态判断是从Redux中实时取最新的状态值，不要使用闭包缓存的旧值。

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