如何在表單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

好的。我設法通過其他一些例子來研究它。我的工作代碼如下。它看起來有點複雜。

有沒有更好的方法呢？

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