React.js+Node(Express)+MongoDB注册功能Redirect跳转后立即回弹问题

你遇到的跳转回弹、地址栏末尾带?的核心原因是没有阻止表单的默认提交行为：
浏览器触发表单submit事件时，会默认走原生表单提交逻辑，往当前页面地址拼接表单参数后刷新页面，你看到的地址栏末尾的?就是原生表单提交的空参数标识。页面刷新后所有React组件state会重置，userConnected回到初始值false，导致刚触发的Redirect跳转失效，直接回弹回注册页。

核心修复：阻止表单默认提交 #

给提交函数加事件阻止逻辑，同时建议改用更稳妥的编程式跳转代替<Redirect>组件判断写法：

1. 先初始化你已经引入的useHistory

const history = useHistory();

2. 修改提交函数逻辑

const handleSubmitForm = async (e) => {
  // 核心：阻止原生表单默认提交和事件冒泡
  e.preventDefault();
  e.stopPropagation();

  // 优化：用URLSearchParams处理参数，避免邮箱特殊字符导致传参异常
  const params = new URLSearchParams();
  params.append('email', email);
  params.append('password', password);

  try {
    const data = await fetch('/users/form', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: params
    })
    const body = await data.json();
 
    if(body.integrationBDD){
      // 直接编程式跳转，不需要依赖state控制组件返回
      history.push('/home');
    }  
  } catch (err) {
    console.error('注册请求异常：', err);
  }
}

补充验证绑定逻辑 #

确认你的提交触发方式符合规范：

• 如果是绑定在<form>标签的onSubmit属性上，提交按钮不需要修改，保持type="submit"即可
• 如果是绑定在提交按钮的onClick属性上，需要把按钮的type改为button，避免触发默认提交：

<Button type="button" onClick={handleSubmitForm}>注册</Button>

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