Как в React перенаправить на новую страницу после отправки формы?

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


Ответы (2 шт):

Автор решения: Aleksandr

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

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.

→ Ссылка
Автор решения: Август
  • менять url через location.href = ... в middleware. как по мне, вполне удобно.
  • записывать результат валидации формы в state компонента, затем внутри метода render можете делать переадресацию, например:

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

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

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