大家好,我是梅巴哥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项目,如果有别的解释和理解,希望大佬们在评论告诉我。谢谢。