Question

我有一个登录表单，当我点击登录时，URL会更新但组件不会。（例如localhost：8080 /某处但仍在登录页面上）

我的软件包版本如下：

react - 15.4.2
react-router＆amp; react-router-dom - 4.1.1
redux-form - 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，但发现这仅适用于未在路由中声明的组件。

提交表单时如何重定向到 Somewhere 组件？

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>时重新呈现您的组件。然后会激活_httpClient.DefaultRequestHeaders.Add("x-coupa-api-key", ConfigurationManager.AppSettings["webApikey"]);。

React Router v4组件未在按钮提交时加载

1 个答案: