React应用接收Node.js后端响应后异常跳转至登录路由问题

核心问题 #

你的代码存在两个关键问题：

1. 表单默认提交行为未阻止：浏览器表单默认会触发同步提交（刷新页面），你的异步fetch请求还未完成，页面就已重置，导致React应用重新初始化，路由回到初始的signin状态。
2. POST参数暴露在地址栏：表单默认提交方式为GET，会把表单参数拼接到地址栏，这和你fetch里的POST请求无关，是浏览器默认行为导致的。

修复步骤 #

1. 阻止表单默认提交行为

修改onSubmitSignIn方法，接收表单提交事件并调用preventDefault()：

onSubmitSignIn = (e) => {
    // 阻止浏览器默认表单提交行为
    e.preventDefault();
    fetch('http://localhost:3000/signin' , {
      method: 'post' , 
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        email: this.state.signInEmail,
        password: this.state.signInPassword
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data === 'success') {
        this.props.onRouteChange('home');
      }
    })
    .catch(err => console.log('请求出错:', err)); // 新增错误捕获，方便排查问题
  }

同时确保Signin组件内的表单onSubmit绑定正确传递事件：

<!-- Signin组件内的表单 -->
<form onSubmit={(e) => this.props.onSubmitSignIn(e)}>
  <!-- 表单内容 -->
</form>

2. 优化onRouteChange的状态更新逻辑

setState是异步操作，多次分开调用可能导致状态更新不及时，建议合并状态更新：

onRouteChange= (route) => {
    this.setState({
      route: route,
      isSignedIn: route === 'home' ? true : route === 'signout' ? false : this.state.isSignedIn
    });
  }

验证效果 #

• 阻止默认行为后，页面不会刷新，异步fetch请求完成后，会根据后端响应正确触发路由跳转。
• 地址栏不会再出现表单参数，因为表单的同步提交行为已被取消。

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