React注册/登录成功后页面无法跳转问题求助

核心问题分析 #

你的代码里将接口成功的判断逻辑统一设为 response.status === 201，但注册和登录接口的标准响应状态码通常不同：注册（创建资源）一般返回201，而登录（验证并返回资源）大多返回200。这会导致登录时success始终为false，无法触发跳转；另外也需要确认navigate的使用是否符合规范。

具体修复步骤 #

• 修正状态码判断逻辑
  针对注册和登录接口分别设置状态码判断，或者用通用的成功状态码范围：

  // 方案1：分接口判断
  const success = isSignUp ? response.status === 201 : response.status === 200;
  
  // 方案2：通用成功状态码范围
  const success = response.status >= 200 && response.status < 300;
  

• 确认navigate函数的有效性
  确保你已正确导入并在React组件上下文内使用useNavigate钩子：

  import { useNavigate } from 'react-router-dom';
  
  function AuthForm() {
    const navigate = useNavigate(); // 必须在组件内部声明
  
    // 你的提交逻辑代码
    const handleSubmit = async () => {
      // ...请求代码
      if (success && isSignUp) navigate('/onboarding');
      if (success && !isSignUp) navigate('/dashboard');
    }
  }
  

  注意：navigate不能在非组件的工具函数中直接使用，必须在React组件的作用域内调用。

• 添加日志验证逻辑分支
  在代码中插入日志，确认实际的响应状态和分支走向：

  const response = await axios.post(`http://localhost:8000/${isSignUp ? 'signup' :  'login'}`, { email, password });
  console.log('响应状态码:', response.status);
  console.log('当前操作类型:', isSignUp ? '注册' : '登录');
  const success = isSignUp ? response.status === 201 : response.status === 200;
  console.log('是否触发跳转:', success);
  

• 检查后端接口响应
  用浏览器DevTools的Network面板或Postman测试接口，确认后端返回的状态码是否符合预期。即使数据成功写入MongoDB，也可能存在后端未正确返回对应状态码的情况。

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