[英]how to redirect to homepage after successful login in ReactJS?
how to redirect to homepage after successful login
in ReactJS? successful login
ReactJS后如何重定向到主页? and also i want to show error message
whenever user enter wrong credential.而且我想在用户输入错误凭据时显示error message
。
i am probably new to ReactJS, it would be great if anybody could help me out what i am trying to solve is.我可能是 ReactJS 的新手,如果有人能帮助我解决我想要解决的问题,那就太好了。 thank you so much in advance and also would be much appreciated.非常感谢您,也将不胜感激。
./src/Login.js ./src/Login.js
import React, {Component} from "react";
import {Form} from 'antd';
export default class App extends Component{
constructor(props) {
super(props);
this.state ={
username: "",
password: "",
}
this.onFormSubmit = this.onFormSubmit.bind(this)
}
onFormSubmit(values){
console.log(values);
const formData = new FormData();
formData.append("username", values.username);
formData.append("password", values.password);
const options = {
method: 'POST',
body: formData
};
try{
fetch('http://localhost:8000/api/login', options).then(() => {
this.props.history.push('/home')
});
}
catch (error) {
alert('Login Failed. Try Again')
}
};
render(){
return(
<div>
<Form onFinish={this.onFormSubmit}>
<div class="col-md-12 form-group p_star">
<Form.Item name="username">
<input type="text" class="form-control" placeholder="Username"/>
</Form.Item>
</div>
<div class="col-md-12 form-group p_star">
<Form.Item name="password">
<input type="password" class="form-control"
placeholder="Password"/>
</Form.Item>
</div>
<div class="col-md-12 form-group">
<button type="submit" value="submit" class="btn_3">
log in
</button>
</div>
</Form>
</div>
If you are using react-router
then you should use like this如果您使用的是react-router
那么您应该像这样使用
console.log(values);
const formData = new FormData();
formData.append("username", values.username);
formData.append("password", values.password);
const options = {
method: 'POST',
body: formData
};
fetch('http://localhost:8000/api/login', options).then((response) => {
notification.success({
message: "login successfully."
});
this.props.history.push('/your-homepage-route') <---- Navigate after successful login
}).catch(error => {
alert('Login Failed. Try Again') <----- Error Handling
});
};```
To redirect to a new page, this is not dependent on react:要重定向到新页面,这不依赖于反应:
window.location = 'http://www.whateveryourpathis.com';
I think for redirection, it will be easy if you are using react-router-dom
package for routing:我认为对于重定向,如果您使用react-router-dom
package 进行路由会很容易:
If you are using it for routing like <Route path="/login" component={Login}/>
, this supercharge this component which makes it easy to do programmatic redirects with:如果您将它用于像<Route path="/login" component={Login}/>
这样的路由,这会增强此组件的功能,从而可以轻松地进行编程重定向:
this.props.history.push('/home')
Otherwise you need to use Height order component from the same package import { withRouter} from 'react-router-dom'
then wrap your component with withRouter(Login)
finally use this.props.history.push('/home')
for redirection否则,您需要使用来自同一 package 的 Height order 组件import { withRouter} from 'react-router-dom'
然后用withRouter(Login)
包装您的组件,最后使用this.props.history.push('/home')
进行重定向
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.