React Router Redirect 没有重定向

Question

我正在尝试在提交表单后重定向离开此页面。由于某种原因，它什么都不做。我没有收到错误，页面保持不变。我正在使用 React 路由器 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

首先使用 react-router-dom 中的高阶组件 withRouter ‘’’ 然后使用 this.props.history.push(“route-path”); ‘’’

React Router Redirect 没有重定向

React Router Redirect is not redirecting

meteor

reactjs

react-router-v4