ログイン後ホームページにリダイレクト

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

コンストラクタ内のさまざまな状態を返すことはあまりお勧めできません。コンポーネントの状態構造は不明です。私のようなものをお勧めしたい：this.setState（） `を使用、まず状態を変異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... 
}