React类组件登录验证后无法正确跳转首页的解决方案

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

如果你的登录按钮放在<form>标签内，点击submit按钮会触发浏览器默认的表单提交跳转，必须先阻止这个行为。在事件处理函数开头调用e.preventDefault()：

handleLogin = (e) => {
  // 阻止浏览器默认跳转行为
  e.preventDefault();

  axios.get('/users.json')
    .then(res => {
      // 从组件state获取输入的用户名和密码
      const { username, password } = this.state;
      // 匹配本地JSON中的用户凭证
      const validUser = res.data.find(user => user.username === username && user.password === password);
      
      if (validUser) {
        // 验证通过后再执行跳转
        this.props.history.push('/home');
      } else {
        // 验证失败给出提示
        alert('用户名或密码错误');
      }
    })
    .catch(err => {
      console.error('读取用户凭证文件失败:', err);
      alert('登录验证出错，请稍后重试');
    });
}

2. 确保跳转逻辑在异步验证完成后执行 #

axios请求是异步操作，不要把跳转代码写在请求外面——否则代码会跳过验证直接执行跳转。必须把跳转逻辑放在then回调的验证通过分支里，等异步请求返回结果、完成验证后再执行。

3. 非表单场景的按钮处理 #

如果没使用<form>标签，建议给按钮显式设置type="button"，避免触发默认的submit行为：

<button type="button" onClick={this.handleLogin}>登录</button>

额外注意事项 #

• 本地JSON文件要放在Create React App项目的public目录下，axios请求路径写/xxx.json才能正确访问到文件。
• 如果使用React Router，确保你的登录组件已经通过withRouter高阶组件包裹，或者已经正确接收到history属性。

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