0

Как в React Router после удачного заполнения формы и нажатия на кнопку отправить, перенаправить на другую страницу? Формы делаю через redux-form

2 ответа 2

1

Сохраните флаг валидации формы в состоянии компонента:

this.state = {validate: false}

После проверки, что форма заполнена правильно, надо поменять флаг validate в состоянии компонента на true, вызвав setState в функции отправки формы:

this.setState(
      prevState => {
        return {
          ...prevState,
        validate: true,
      };
    }
  );

В коде визуализации компонента, содержащего роутер, необходимо добавить проверку флага правильности заполнения формы и добавить переход на другую страницу, например, по адресу /home:

<Route
  exact
  path="/form"
  render={() => (
    this.state.validate ? (
      <Redirect to="/home"/>
    ) : (
      <FormPage/>
    )
  )}
/>

Если форма не прошла валидацию, то будет отображен компонент с формой FormPage по адресу /form.

1
  • ответ рабочий, вот только придется импортировать state формы компонента в модуль роутера, не так ли? а то здесь, как будто, роутер и компонент формы в одном модуле лежат. разве что только результат валидации (this.state.validate) передавать по store, чтобы модуль с роутером мог его видеть 8 фев 2020 в 2:29
0
  • менять url через location.href = ... в middleware. как по мне, вполне удобно.
  • записывать результат валидации формы в state компонента, затем внутри метода render можете делать переадресацию, например:

    render() { if (this.state.formIsValid) return <Redirect to="/lala">;

  • записывать результат валидации формы в store, и внутри Router делать переадресацию (как коллега ниже предложил)

  • для извращенности можете даже внутри componentDidUpdate или других жизненных циклов сделать переадресацию через location.href = ...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.