React Router Redirect не перенаправляет

Question

Я пытаюсь перенаправить с этой страницы после отправки формы. По какой-то причине это ничего не делает. Я не получаю сообщение об ошибке, и страница остается прежней. Я использую реагирующий маршрутизатор 4. Что мне здесь не хватает?

handleSubmit(event) {
  event.preventDefault();

  if (isObjectEmpty(errorsInForm)) {
    Meteor.call(
      'user.multiplechoice.answer',
      conductedExamId,
      (err, res) => {
        if (err) {
          alert(err.reason);
        } else {
          <Redirect to="/test" />;
        }
      }
    );
  }
}

Answer 1

<Redirect /> - это компонент, который должен возвращаться функцией render, а не обработчиком события.Если вы хотите использовать компонент Redirect, вы должны установить состояние при успешном вызове API и визуализировать компонент на основе этого состояния.

state = {
    formSuccess: false
}

handleSubmit(event) {
    /* Call to api was successful */
    this.setState({ formSuccess: true });
}

render() {
    if (this.state.formSuccess) {
        return (<Redirect to="/test" />);
    }

    /* The rest of your render function */
}

Если вы не хотите использовать Redirect компонента и просто хотите перенаправить, вы должны иметь доступ к истории вашего Router компонента.Вы делаете это, оборачивая свой компонент, который имеет функцию handleSubmit, в withRouter HOC, чтобы дать ему доступ к истории.

import { withRouter } from "react-router";

class MyAwesomeFormComponent {
    handleSubmit() {
        /* Call to api was successful */
        this.props.history.push("/test");
    }
}

export default withRouter(MyAwesomeFormComponent);

Answer 2

Сначала используйте Компонент высшего порядка withRouter из response-router-dom '' 'Затем используйте this.props.history.push («route-path»);'' '