我已经创建了一个登录页面,成功登录后,我想转到主页。
我已经在App.js文件中创建了一个路由器
class App extends Component {
render() {
return (
<div>
<Header />
<BrowserRouter>
<Switch>
<Route path="/" component={ Login } exact/>
<Route path="/login" component={ Home }/>
<Route component={ Error }/>
</Switch>
</BrowserRouter>
<Footer />
</div>
);
}
}
然后在UserLogin组件中,成功响应后我将使用访存方法进行登录
return fetch('http://localhost:6020/login',
{
headers:{
"Accept": "application/json",
"Content-Type": "application/json"
},
method:'POST',
body:JSON.stringify(user)
}
).then(response => response.json())
.then(function(data){
console.log(data.error);
if(data.error===null){
return <Redirect to='/login' />
}
else{
console.log("not working");
}
});
在上面的代码中,我用户<Redirect to='/login' />
通过从react-router-dom导入Redirect仍然不执行任何操作,也没有错误记录。
成功登录后我只想显示主页
答案 0 :(得分:1)
尝试
if(data.error===null){
window.location.href = '/login'
}
答案 1 :(得分:0)
if (!data.error){
this.props.history.push('/')
}
这行吗?
答案 2 :(得分:0)
您可以在登录页面内使用重定向
class Login extends Component{
...
this.state={
loginSuccess:false
}
在身份验证响应中
.then(function(data){
console.log(data.error);
if(data.error===null){
setState({
loginSuccess:true
})
}
在渲染中添加以下代码为
{ this.state.loginSuccess && <Redirect to="/" /> }