试图弄清楚如何返回上一页。我在用[react-router-v4][1]
这是我在第一个登陆页面中配置的代码:
<Router>
<div>
<Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
<Route exact path="/" component={Page1}/>
<Route path="/Page2" component={Page2}/>
<Route path="/Page3" component={Page3}/>
</div>
</Router>
为了转发到后续页面,我只需执行以下操作:
this.props.history.push('/Page2');
但是,如何返回上一页呢?
尝试了下面提到的一些事情,但没有运气:
1.this.props.history.goBack();
给出错误:
类型错误:null 不是对象(评估“this.props”)
this.context.router.goBack();
给出错误:
类型错误:null 不是对象(评估“this.context”)
this.props.history.push('/');
给出错误:
类型错误:null 不是对象(评估“this.props”)
发布Page1
代码如下:
import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
class Page1 extends Component {
constructor(props) {
super(props);
this.handleNext = this.handleNext.bind(this);
}
handleNext() {
this.props.history.push('/page2');
}
handleBack() {
this.props.history.push('/');
}
/*
* Main render method of this class
*/
render() {
return (
<div>
{/* some component code */}
<div className="navigationButtonsLeft">
<Button onClick={this.handleBack} bsStyle="success">< Back</Button>
</div>
<div className="navigationButtonsRight">
<Button onClick={this.handleNext} bsStyle="success">Next ></Button>
</div>
</div>
);
}
export default Page1;
我认为问题在于绑定:
constructor(props){
super(props);
this.goBack = this.goBack.bind(this); // i think you are missing this
}
goBack(){
this.props.history.goBack();
}
.....
<button onClick={this.goBack}>Go Back</button>
正如我在发布代码之前所假设的:
constructor(props) {
super(props);
this.handleNext = this.handleNext.bind(this);
this.handleBack = this.handleBack.bind(this); // you are missing this line
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)