React:关于this.props.history.push跳转失败的思考与解决

大家好,我是梅巴哥er。本篇介绍关于页面跳转的问题。
最近在练习一个项目,从登录页面,点击登录,跳转到主页。
但是,写好了代码,怎么跳都跳不过去。
请求的数据是能请求到的,能正常显示,页面也有跳转反应,但是一直不能跳转到主页。只是在登录页面打转转。
简略代码如下:

import axios from axios

handleClick = () => {
	let params = {
            username: this.state.username,
            password: this.state.password
        }
    axios.get('/server/data.json', params)
        .then((res) => {
            
            if (res.data.success) {
                console.log(res.data.errmsg)
                // 如果登录成功 要跳转到哪个页面
                this.props.history.push('/home')
            }
        })
}

按理来说,这个写法没有错啊。该有的都有了。页面还是无法跳转。
每次点跳转的时候,页面都在登录页面打转转,就是不跳过去。
于是!!我就思考,是不是页面的默认事件导致的。根据这个思路,我就稍微修改了一下代码:

import axios from axios

handleClick = (e) => {
	e.preventDefault() // 这里添加了一个阻止默认事件
	let params = {
            username: this.state.username,
            password: this.state.password
        }
    axios.get('/server/data.json', params)
        .then((res) => {
            
            if (res.data.success) {
                console.log(res.data.errmsg)
                // 如果登录成功 要跳转到哪个页面
                this.props.history.push('/home')
            }
        })
}

把默认事件阻止了。 然后就成功跳转过去了。因为,组件里的按钮button本身在页面里就有一个默认的点击事件,页面接收到请求后,会先进行默认事件。所以需要把这个默认事件阻止掉。才会正常跳转。

第一次做一个完整的react项目,如果有别的解释和理解,希望大佬们在评论告诉我。谢谢。


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值