Question

我已经创建了一个登录页面，成功登录后，我想转到主页。

我已经在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仍然不执行任何操作，也没有错误记录。

成功登录后我只想显示主页

Answer 1

尝试

if(data.error===null){
    window.location.href = '/login'
}

Answer 2

if (!data.error){
    this.props.history.push('/')
}

这行吗？

Answer 3

您可以在登录页面内使用重定向

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="/" /> }

登录成功后ReactJS路由到主页

3 个答案: