反應路由器v4組件未載入按鈕提交

Question

我有一個登錄表單，當我點擊登錄時，URL被更新，但組件不是。 （如本地主機：8080 /的地方，但仍然登錄頁面上）

我的包的版本如下：

• 反應 - 15.4.2
• 反應路由器&反應路由器-DOM - 4.1.1
• Redux的形式 - 6.6.1

這是登錄部件

class Login extends React.Component { 
handleFormSubmit = (values) => { 
    this.props.signInUser(values); 
    history.push('/somewhere'); 
}; 
<div> 
    <div> 
     <h2>Log In</h2> 
     <form onSubmit={ this.props.handleSubmit(this.handleFormSubmit) }> 
     <Field name="email" type="text" label="Email"/> 
     <Field name="password" type="password" label="Password"/> 
     <button action="submit">Sign In</button> 
     </form> 
    </div> 
</div> 
... 
} 
export default connect(mapStateToProps, Actions,)(reduxForm({ 
    form: 'login', 
    validate,})(Login)); 

我正在使用history.push因爲我有一個共享的歷史對象。

我的路線如下：

<Provider store={ store }> 
     <Router history={history}> 
     <App> 
      <Switch> 
      <Route exact path="/" component={ Home }/> 
      <Route path="/login" component={ Login } /> 
      <Route path="/somewhere" component={ Somewhere } /> 
      </Switch> 
     </ App > 
     </Router> 
    </Provider> 

我嘗試使用<Redirect>但不能讓它開始工作。還嘗試使用withRouter，但發現這僅適用於未在路由中聲明的組件。

如何在提交表單時重定向到某處組件？

Answer 1

我不知道，這是做到這一點的最好辦法，但它爲我工作：

<form onSubmit={ this.props.handleSubmit(this.handleFormSubmit) }> 
    <Field name="email" type="text" label="Email"/> 
    <Field name="password" type="password" label="Password"/> 
    <button action="submit">Sign In</button> 
    {this.props.user.loggedIn && <Redirect to={'/Somewhere'} />} 
</form> 

鑑於this.props.handleSubmit(this.handleFormSubmit)分派誰切換到真正的loggedIn支柱user的作用。

您必須將user映射到道具，以便組件在user.loggedIn更改時重新呈現。然後<Redirect>將被激活。