ReactJS用户注册成功后如何实现指定页面跳转？

前端跳转逻辑错误 #

你在axios请求成功回调里写的<Route exact path="/" component={HomeIn} />是React Router的路由声明组件，仅用于在组件JSX结构中定义路由匹配规则，不能用来触发页面跳转，写在这里不会产生任何跳转效果。

修复方式： #

根据你使用的React Router版本选择对应的跳转API：

• 若使用React Router v6版本：
  先在组件顶部引入useNavigate钩子，调用钩子生成跳转方法后在回调中执行跳转：

  import { useNavigate } from 'react-router-dom'
  
  // 在Signup组件内部顶层位置声明
  const navigate = useNavigate()
  
  const submitUser = () => {
    Axios.post('http://localhost:3001/api/signUp', {
      // 原有请求参数
    })
    .then(() => {
      // 执行跳转
      navigate('/')
    })
  }
  

• 若使用React Router v5及更早版本：
  使用useHistory钩子实现跳转：

  import { useHistory } from 'react-router-dom'
  
  // 在Signup组件内部顶层位置声明
  const history = useHistory()
  
  // 回调中执行跳转
  .then(() => {
    history.push('/')
  })
  

服务端未返回响应导致请求无回调 #

你当前的服务端代码仅在数据库操作完成后打印了成功日志，没有给前端返回任何响应，会导致前端的axios请求一直处于等待状态直到超时，最终不会进入then回调，只会进入异常捕获的catch回调。

修复方式： #

在服务端的数据库操作回调中增加返回响应的逻辑，同时补充错误处理：

app.post('/api/signUp', (req, res) => {
  // 原有参数获取逻辑
  const sqlInsert = "INSERT INTO users (title,first_name,last_name,email,company,phone_type,phone_number,password,confirm_password) VALUES (?,?,?,?,?,?,?,?,?);"
  db.query(sqlInsert, [Title,fname,lname,email,comp,pt,pn,password,confirm_password], (err, result) => {
    if(err) {
      // 操作失败返回错误信息
      return res.status(500).json({ status: 'fail', msg: '注册失败' })
    }
    // 操作成功返回成功响应
    res.status(200).json({ status: 'success', msg: '注册成功' })
  });
});

额外优化建议 #

• 给axios请求补充catch回调捕获异常，方便后续排查问题：

  Axios.post(/* 原有请求参数 */)
  .then(() => {
    // 跳转逻辑
  })
  .catch(err => {
    console.error('注册请求出错：', err)
  })
  

• 不要直接将明文密码、确认密码存入数据库，建议使用bcrypt等加密工具对密码做哈希处理后再存储，确认密码仅需在校验阶段判断和密码一致即可，无需持久化存储。

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