登錄後重定向到首頁

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... 
}