フォームonSubmitの後に新しいコンポーネントにリダイレクトするにはどうすればよいですか？

Question

私はWes-Bosチュートリアルを行い、フォームがStorePickerから送信された後にApp.jsコンポーネントにリダイレクトする別の方法について考えています。

マイStorePickerコンポーネント：

class StorePicker extends React.Component { 
    goToStore(event) { 
    event.preventDefault(); 
    const storeId = this.storeInput.value; 
    return <Redirect to={`/store/${storeId}`} />; 
    } 

    render() { 
    return (
     <Grid textAlign='center' columns={2}> 
     <Grid.Row> 
      <Grid.Column><br/> 
      <Segment> 
       <Form onSubmit={(e) => this.goToStore(e)} > 
       <Form.Field > 
        <h1>Store Name</h1> 
        <input type="text" required 
        placeholder="Store Name" 
        ref={(input) => {this.storeInput = input}} 
        defaultValue={getFunName()} /> 
       </Form.Field> 
       <Button fluid type='submit'>Visit Store -></Button> 
       </Form> 
      </Segment> 
      </Grid.Column> 
     </Grid.Row> 
     </Grid> 
    ) 
    } 
} 

私はを通して見て、ルータのマニュアルを参照して反応し、それが<Redirect />が動作していないようだと遊んしようとしています。どのようにこのリダイレクトを管理するためのアドバイス？ありがとう

Answer 1

あなたは、プログラムhistory小道具を使用することができます。

プッシュ（パス、[状態]） - （機能）は、新しいエントリをプッシュ履歴スタック上に

class StorePicker extends React.Component { 
    goToStore = (event) => { 
    event.preventDefault(); 
    this.props.history.push(`/store/${this.storeInput.value}`); 
    } 

    render() { 
    return (
     <Grid textAlign="center" columns={2}> 
     <Grid.Row> 
      <Grid.Column> 
      <br /> 
      <Segment> 
       <Form onSubmit={this.goToStore}> 
       <Form.Field> 
        <h1>Store Name</h1> 
        <input 
        type="text" 
        required 
        placeholder="Store Name" 
        ref={(input) => { 
         this.storeInput = input; 
        }} 
        defaultValue={getFunName()} 
        /> 
       </Form.Field> 
       <Button fluid type="submit"> 
        Visit Store -> 
       </Button> 
       </Form> 
      </Segment> 
      </Grid.Column> 
     </Grid.Row> 
     </Grid> 
    ); 
    } 
} 

また、履歴にアイテムを作成したくない場合は置き換えます。

Answer 2

OK。私はそれが他のいくつかの例を見て動作するように管理してきました。私の作業コードは以下の通りです。それは少し複雑に見えます。

良い方法がありますか？

class StorePicker extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     fireRedirect: false 
    } 
    } 
    goToStore(event) { 
    event.preventDefault(); 
    this.setState({ fireRedirect: true }) 

    } 

    render() { 
    const { from } = this.props.location.state || '/' 
    const { fireRedirect } = this.state 

    return (
     <Grid textAlign='center' columns={2}> 
     <Grid.Row> 
      <Grid.Column><br/> 
      <Segment> 
       <Form onSubmit={(e) => this.goToStore(e)} > 
       <Form.Field > 
        <h1>Store Name</h1> 
        <input type="text" required 
        placeholder="Store Name" 
        ref={(input) => {this.storeInput = input}} 
        defaultValue={getFunName()} /> 
       </Form.Field> 
       <Button fluid type='submit'>Visit Store -></Button> 
       </Form> 
       {fireRedirect && (
       <Redirect to={from || `/store/${this.storeInput.value}`}/>)} 
      </Segment> 
      </Grid.Column> 
     </Grid.Row> 
     </Grid> 
    ) 
    } 
}