ReactJS：未处理的拒绝（TypeError）：无法读取未定义的属性“ push”

Question

使用表单并插入新数据后，将显示此错误。

这是我的代码：

import React from "react";
import { Form, Input, Button } from "antd";
import { connect } from "react-redux";
import axios from "axios";

import hashHistory from './hashHistory';


const FormItem = Form.Item;




class CustomForm extends React.Component {

  handleFormSubmit = async (event, requestType, articleID) => {
    event.preventDefault();

    const postObj = {
      title: event.target.elements.title.value,
      content: event.target.elements.content.value
    }

    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`,
    };

    if (requestType === "post") {
      await axios.post("http://192.168.196.49:8000/api/create/", postObj)
        .then(res => {
          if (res.status === 201) {
            //this.props.history.push(`/articles/`);
            //this.props.hashHistory.push('/');
            //hashHistory.push(String('/articles/'))
            this.props.history.push({
              pathname: "/"
           })

          }
        })
    } else if (requestType === "put") {
      await axios.put(`http://192.168.196.49:8000/api/${articleID}/update/`, postObj)
        .then(res => {
          if (res.status === 200) {
            //this.props.history.push(`/articles/`);
            //this.props.hashHistory.push('/');
            //hashHistory.push(String('/articles/'))
            this.props.history.push({
              pathname: "/"
           })
          }
        })
    }
  };

  render() {

    console.log("debug:", this.props)

    return (
      <div>
        <Form
          onSubmit={event =>
            this.handleFormSubmit(
              event,
              this.props.requestType,
              this.props.articleID
            )
          }
        >
          <FormItem label="Título">
            <Input name="title" placeholder="Put a title here" />
          </FormItem>
          <FormItem label="Comentario">
            <Input name="content" placeholder="Enter some content ..." />
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit">
              {this.props.btnText}
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    token: state.token
  };
};

export default connect(mapStateToProps)(CustomForm);

路线

 <Route exact path="/articles/" component={ArticleList} />{" "} 
 <Route exact path="/articles/:articleID/" component={ArticleDetail} />{" "}

错误消息：

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

数据已正确存储到数据库中，但是提交后就出现此错误。

我的原始代码使用了history.push，但是尝试了hashHistory.push。

我正在proyect中使用redux。

版本使用：
反应路由器5.1.2
历史记录4.9.0

Answer 1

尝试将模块设为hashHistory：

// hashHistory.js
import { createHashHistory } from 'history'; // worked for the OP
export default createHashHistory({}); 

并使用它：

const history = createHashHistory();
// ....

 // **EDIT** This should work
 history.push("/articles/")

Answer 2

您可以使用withRouter在道具中推送历史记录。

import { withRouter } from 'react-router';

const SpecialButton = withRouter(({ history, path, text }) => {
  return (
    <Button
      onClick={() => { history.push(path); }}
    >
      {text}
    </Button>
  )
});

Answer 3

这是可行的解决方案（可能不是最好的解决方案...）

代码：

import React from "react";
import { Form, Input, Button } from "antd";
import { connect } from "react-redux";
import axios from "axios";
import { createHashHistory } from 'history'


const FormItem = Form.Item;

class CustomForm extends React.Component {

  handleFormSubmit = async (event, requestType, articleID) => {
    event.preventDefault();

    const postObj = {
      title: event.target.elements.title.value,
      content: event.target.elements.content.value
    }

    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`,
    };

    const history = createHashHistory();

    if (requestType === "post") {
      console.log("debug_1.1_Form_post_history: ", history )
      await axios.post("http://192.168.196.49:8000/api/create/", postObj)
        .then(res => {
          if (res.status === 201) {
            history.push("/articles/")
          }
        })
    } else if (requestType === "put") {
      console.log("debug_1.2_Form_put_history: ", history )
      await axios.put(`http://192.168.196.49:8000/api/${articleID}/update/`, postObj)
        .then(res => {
          if (res.status === 200) {
          console.log("debug_1.3_Form_put_this.props: ", this.props)
              history.push("/articles/");
          }
        })
    }
  };

  render() {
    return (
      <div>
        <Form
          onSubmit={event =>
            this.handleFormSubmit(
              event,
              this.props.requestType,
              this.props.articleID
            )
          }
        >
          <FormItem label="Title">
            <Input name="title" placeholder="Put a title here" />
          </FormItem>
          <FormItem label="Content">
            <Input name="content" placeholder="Enter some content ..." />
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit">
              {this.props.btnText}
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    token: state.token
  };
};

export default connect(mapStateToProps)(CustomForm);