javascript - 当从 promise 转发时，React Router 将重定向回来

Question

我构建了一个小的 React Routing 应用程序，并希望在表单提交成功的 HTTP 响应后测试转发到不同的 React 页面。
单击提交按钮时，将显示红色的提交确认屏幕，但不久之后，浏览器将返回到原始屏幕，并添加了表单参数“/?dummy=dummy”。如果我在 promise 之外进行重定向，例如在 HTTP 调用之前，提交确认屏幕将保留。
是否有有用的替代方法来实现类似的行为？
路由设置:

export default function App() {
  return (<Router>
      <Switch>
        <Route path="/" exact component={TestForm} />
        <Route path="/submitted" component={Submitted} />
      </Switch>
    </Router>
);}

测试组件:

class TestForm extends Component {
  submitHandler = () => {
    let history = this.props.history;
    fetch("https://reqres.in/api/users/6")
      .then(response => {
        history.push({ pathname: "/submitted" });
       });
  };
  render() {
    return (<div>
      <form onSubmit={this.submitHandler}>
        <input type="text" name="dummy" value="dummy" readOnly /><input type="submit" />
      </form>
    </div>);}}
export default withRouter(TestForm);

提交确认组件:

const submitted = props => {
  let style = { "background-color": "red" };
  return <div style={style}>Form has been submitted</div>;
};

完整的代码和行为可以在 sandbox 中测试.

Answer 1

这是因为您没有阻止表单提交事件的默认功能，它正在发布结果。
更新您的事件处理程序以防止默认。

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class TestForm extends Component {
  submitHandler = (e) => {
    e.preventDefault()
    let history = this.props.history;

    fetch("https://reqres.in/api/users/6")
      .then(response => {
        history.push({ pathname: "/submitted" });
      })
      .catch(myError => {
        console.log(myError);
      });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.submitHandler}>
          <input type="text" name="dummy" value="dummy" readOnly />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

export default withRouter(TestForm);