Как в React перенаправить на новую страницу после отправки формы?
Как в React Router после удачного заполнения формы и нажатия на кнопку отправить, перенаправить на другую страницу? Формы делаю через redux-form
Ответы (2 шт):
Сохраните флаг валидации формы в состоянии компонента:
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 = ...