React注册组件409错误处理异常，页面跳转逻辑未执行求助

我正在基于MySQL和Express构建CRUD系统，想要实现「用户名已注册时重定向用户到登录页」的功能，但遇到409（Conflict）错误时，尽管用了try/catch处理，控制台还是显示Failed to load resource: the server responded with a status of 409 (Conflict)，且跳转到登录页的代码没执行。

相关代码 #

React组件代码 #

import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import axios from 'axios'

const Register = () => {
  const [inputs, setInputs] = useState({
    username: '',
    email: '',
    password: ''
  });

  const [err, setError] = useState(null);

  const navigate = useNavigate();

  const handleChange = e => {
    setInputs(prev=>({...prev, [e.target.name]: e.target.value}))
  }

  const handleClick = async (e) => {
    e.preventDefault()  
    try{
      await axios.post('http://localhost:8800/api/auth/register', inputs);
      setTimeout(()=>{
        navigate("/login")
      }, "1500");
    } catch(err){
      setError(err.response.data)   
    }
  }

  return (
    <div className="auth">
      <h1>Register</h1>
      <form>
        <input required type="text" name='username' placeholder='Username' onChange={handleChange}/>
        <input required type="email" name='email' placeholder='Email' onChange={handleChange}/>
        <input required type="password" name='password' placeholder='Password' onChange={handleChange}/>
        <button onClick={handleClick}>Sign up</button>
        {err && <p>{err}</p>}
        <span>Already have an account? <br/><Link to='/login'>login!</Link></span>
      </form>
    </div>
  )
}

export default Register

Express控制器代码 #

import { db } from '../db.js'
import bcrypt from 'bcryptjs'

export const register = (req, res) => {
    //check existing user
    const q = "SELECT * FROM blog.users WHERE email = ? OR username = ?;;";
    
    db.query(q, [req.body.email, req.body.username], (err, data) => {
        if (err) return res.json(err)
        if(data.length) return res.status(409).json('user already exists!')

        // hash the password and create a user
        bcrypt.genSalt(10, (err, salt)=>{
            if(err){
                console.log(err)
                return res.status(500).json('error saving data');
            } 
            bcrypt.hash(req.body.password, salt, (err, hash) => {
                if(err){
                    console.log(err)
                    return res.status(500).json('error saving data');
                } 
                const password = hash;
                const q = "INSERT INTO blog.users(`username`, `email`, `password`) VALUES (?)";
                const values = [req.body.username, req.body.email, password]

                db.query(q, [values], (err, data) => {
                    if(err){
                    console.log(err)
                    return res.status(500).json('error saving data');
                } 
                    return res.status(200).json('User has been created');
                })
            })
        })
    })
}

export const login = (req, res) => {
    
}

export const logout = (req, res) => {
    
}

问题分析与修复步骤 #

1. 控制台409报错的处理 #

浏览器会自动记录HTTP错误状态码的请求，这是正常的浏览器行为，你的try/catch已经成功捕获错误并设置了前端提示。如果不想看到这个报错，可以在axios请求中配置validateStatus，让axios不把409视为错误：

await axios.post('http://localhost:8800/api/auth/register', inputs, {
  validateStatus: (status) => status < 500 // 仅将500及以上状态码判定为错误
});

2. 重定向未执行的修复 #

你的重定向代码写在try块中，只有请求返回2xx成功状态时才会触发。而用户名已存在时返回409，会进入catch块，因此重定向逻辑不会执行。需要在catch块中判断错误状态码为409时，执行重定向：
修改React组件的handleClick函数：

const handleClick = async (e) => {
  e.preventDefault()  
  try{
    await axios.post('http://localhost:8800/api/auth/register', inputs);
    setTimeout(()=>{
      navigate("/login");
    }, 1500); // 注意此处需传数字，而非字符串"1500"
  } catch(err){
    setError(err.response.data);
    // 当错误状态码为409时，重定向到登录页
    if(err.response.status === 409){
      setTimeout(()=>{
        navigate("/login");
      }, 1500);
    }
  }
}

3. 额外优化建议 #

• Express端可统一错误处理逻辑，减少重复的错误返回代码；
• 可区分「用户名已存在」和「邮箱已存在」的提示，让用户更明确问题；
• 添加加载状态，防止用户重复提交表单。

内容的提问来源于stack exchange，提问作者Juan Carlos Muñoz Pico