登录后重定向到首页

Question

在这里反应新手。 我有一个应用程序与反应和轨道建成。在主页上有一个登录链接。将用户带到登录页面。在验证用户名是否存在时，我正尝试使用下面的代码重定向到主页。

export default class Login extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      username: '', 
      isValid: false 
     }; 
     this.handleSubmit = this.handleSubmit.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 

    handleSubmit(event) { 
     axios.get('/isuser/'+this.state.username) 
      .then(res => { 
       this.setState({ isValid: true }); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 
     event.preventDefault(); 
    } 

    handleChange(event) { 
     this.setState({username: event.target.value}); 
    } 

    render() { 
     if (this.state.isValid) { 
      return <Redirect to={{ 
         pathname: '/', 
         state: { 
           username: this.state.username, 
           loggedIn: true 
         } 
       }}/> 
     } 
     return (
       <div> 
       //form 
       </div> 
     ); 
    } 
} 

但是，道具是空的。我使用下面的代码来获取它。

export default class LoginLink extends React.Component { 

    constructor(props) { 
     super(props); 
     if(this.props.state == undefined) { // always empty 
      this.state = {loggedIn: false, redirect: false}; 
     } 
     else { 
      this.state = { 
         loggedIn: this.props.location.state.loggedIn, 
         username: this.props.location.state.username 
      }; 
     } 
     this.handleOnClick = this.handleOnClick.bind(this); 
    } 

    handleOnClick(event) { 
     this.setState({redirect: true}); 
     event.preventDefault(); 
    } 

    render() { 
     if (this.state.redirect) { 
      return <Redirect to={{ 
         pathname: '/login' 
        }}/> 
     } 
     else { 
      if (this.state.loggedIn) { 
       return (
        <ul className="nav navbar-nav navbar-right" id="topnav"> 
         <li><a href="">{this.state.username}</a></li> 
        </ul> 
       ); 
      } 
      else { 
       return (
        <ul className="nav navbar-nav navbar-right" id="topnav"> 
         <li> 
          <Button bsStyle="link" onClick={this.handleOnClick}>Log in</Button> 
         </li> 
        </ul> 
       ); 
      } 
     } 
    } 
} 

这里是我的路线：

<main> 
    <Switch> 
    <Route exact path='/' component={Home}/> 
    <Route path='/login' component={Login}/> 
    </Switch> 
</main> 

我不知道是否有某种形式的无限循环的（调用超）。 任何帮助表示赞赏。

Answer 1

在构造函数中返回不同的状态并不是很好的做法。因为组件的状态结构还不清楚。我建议是这样的：

constructor(props) { 
    super(props); 
    this.state = { 
    loggedIn: props.location.state.loggedIn || false, 
    username: props.location.state.username || null, 
    } 
} 

然后在render()功能

render() { 
    // if loggedIn go to '/' 
    if (this.state.loggedIn) { 
    return <Redirect to={{ pathname: '/', state: { ...this.state, loggedIn: true } }} /> 
    } 
    // otherwise 
    // return something else or Redirect to login... 
}