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

Question

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

我的包版本如下：

反应 - 15.4.2
反应路由器和反应路由器-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 ) 调度了一个将 user 的 loggedIn 属性切换为 true 的动作。

您必须将 user 映射到道具，以便您的组件在 user.loggedIn 更改时重新渲染。然后 <Redirect> 将被激活。

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

React Router v4 Component not loaded on button submit

react-router

react-redux

redux-form

react-router-redux

react-router-v4