Компонент React Router v4 не загружается при нажатии кнопки отправки

У меня есть форма входа, и когда я нажимаю кнопку входа, URL-адрес обновляется, а компонент - нет. (например, localhost: 8080 / где-то, но все еще на странице входа)

Версии моих пакетов следующие:

  • реагировать - 15.4.2
  • реагировать-маршрутизатор и реагировать-маршрутизатор-дом - 4.1.1
  • редукс-форма - 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, но обнаружил, что это применимо только для компонентов, не объявленных в маршрутах.

Как мне перенаправить на компонент Где-то при отправке формы?


react-redux redux-form react-router react-router-v4 react-router-redux
person Reactor    schedule 26.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что это лучший способ сделать это, но у меня он работает:

<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 ) отправляет действие, которое переключает на true свойство loggedIn для user.

Вы должны сопоставить user с реквизитами, чтобы ваш компонент повторно отображался при изменении user.loggedIn. Затем <Redirect> будет активирован.

person Victor Baron    schedule 26.04.2017
comment
Выяснилось, что я не отображал реквизиты в mapStateToProps. Большое спасибо! - person Reactor; 27.04.2017