[英]How to redirect login page to dashboard using ReactJS?
I want when I submit the email and the password to login, it will be redirected to the dashboard, my code is below :我希望当我提交电子邮件和登录密码时,它将被重定向到仪表板,我的代码如下:
handleClick(event){
var payload={
"email":this.state.email,
"password":this.state.password
}
axios({
method: 'post',
url: '/app/login/',
data: payload,
withCredentials: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
'Accept': 'application/json',
}
})
.then(function (response) {
console.log(response);
if(response.data.code == 200){
response.redirect('http://localhost:5000/#/dashboard');
}
else if(response.data.code == 204){
swal("Erreur !", "Vérifiez vos champs SVP !", "error");
}
else{
swal("Erreur !", "Username inexistant !", "error");
}
})
}
My route :我的路线:
import React from 'react';
import Loadable from 'react-loadable'
const Dashboard = Loadable({
loader: () =>
import ('./views/Dashboard'),
loading: Loading,
});
const routes = [
{ path: '/dashboard', name: 'Dashboard', component: Dashboard }]
When I run it, I get :当我运行它时,我得到:
How can I fix that please ?请问我该如何解决?
There is no redirect
method in axios response object. axios 响应对象中没有redirect
方法。 To handle this you might workout with your router which you use.为了解决这个问题,您可以使用您使用的路由器进行锻炼。
router.push({ path: '/dashboard' })
Like this... router.push({ path: '/dashboard' })
像这样...
In case you using react-router
: try to extract history
from component props, like this:如果您使用react-router
:尝试从组件道具中提取history
,如下所示:
this.props.history.push('/dashboard')
use withRouter
to access history props in your component:使用withRouter
访问组件中的历史道具:
here is working example : https://codeshare.io/5OZbdW这是工作示例: https : //codeshare.io/5OZbdW
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.