使用反应路由器重定向 [英] redirect using react router
问题描述
我正在使用 ReactJS
并且如果发布请求成功,则需要重定向到另一个组件的表单(组件)。我刚刚开始使用react路由器,所以这就是我尝试重定向的方式。
I am using ReactJS
and have a form (component) that needs to redirect to another component, if the post request is successful. I have just started using react router, so this is the way I am trying to redirect.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import NextComponent from '/NextComponent';
import axios from 'axios';
class CurrentComponent extends Component {
constructor() {
super();
this.state = {
value: ''
redirect: false
};
}
handleSubmit() {
axios.post('xxx/yyy', {
xxx: yyy
})
.then(function() {
console.log('Success');
this.setState({redirect: true});
})
.catch(function() {
console.log('Error');
});
}
render() {
return(
<div>
<form>
<div className="form-group">
<input type="name" placeholder="name" />
</div>
<div className="form-group">
<button type="button" onClick={this.handleSubmit.bind(this)} >Submit</button>
{this.state.redirect &&
<Redirect to={{
pathname: '/nextcomponent',
state: {from: this.state.value}
}} />
}
</div>
<Router>
<Route path="/nextcomponent" component={NextComponent} />
</Router>
</form>
</div>
);
}
}
export default PresentComponent;
它没有重定向,我一直试图解决这个问题。我相信有更好的解决方案,但由于我缺乏知识,我不确定是否可以实施。任何帮助表示赞赏。谢谢。
It is not redirecting and I have been trying to figure this out. I am sure there are better solutions available, but due to my lack of knowledge I am unsure of implementing it. Any help is appreciated. Thank you.
推荐答案
发布后你可能没有收到州
调用,尝试将 handleSubmit
方法修改为:
Probably you are not getting the state
after post call, try modifying the handleSubmit
method as:
handleSubmit() {
let _this = this;
axios.post('xxx/yyy', {
xxx: yyy
})
.then(function() {
console.log('Success');
_this.setState({redirect: true});
})
.catch(function() {
console.log('Error');
});
}
根据新密码更新:
class ComponentOne extends Component {
constructor() {
super();
this.UpdateRoute= this.UpdateRoute.bind(this);
this.state = {
value: ''
};
this.loggedin = false;
}
const UpdateRoute = () => (
<Router>
<Route exact path="/xyz" render={() => (
loggedin ? (
<ComponentTwo />
) : (
<ComponentOne />
)
)}/>
</Router>
)
handleSubmit() {
let _this = this;
axios.post('/xyz', {
xxx: yyy,
})
.then(function(response) {
_this.loggedin = true;
_this.UpdateRoute();
})
.catch(function() {
console.log('Error');
});
}
render() {
return(
<div>
<h1>Load First</h1>
<button type="button" onClick={this.handleSubmit.bind(this)}>Submit</button>
</div>
);
}
}
export default ComponentOne;
这篇关于使用反应路由器重定向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!