React JS：history.push不是函数错误，并且在swal单击时不会导航到其他页面

Question

在过去的几个月中，我一直在使用react js，只是了解了React的sweetalert bootstrap插件。成功更新组件时，屏幕上会出现一个对话框。在单击“单击此处”按钮后，history.push会被调用，它应该路由到其他页面，但出现错误

history.push未定义。

我用谷歌搜索了很多东西，并尝试了很多场景，但是都没有成功。

代码段：

class displayBlank extends Component {

render(){

<div id="displayDetails">
          <DisplayDetails respData={this.state.respData}  />
        </div>

}

}

export default displayBlank;


class displayDetails{

 handleUpdate()
 {

  // Body of HandleUpdate
    swal({
      title :"Customer Updated Successfully!",
      icon : "success",
      button: "Click Here!",
    }).then((e) => { history.push('/blank');
  });

  }

  render(){

  <table>
  <tr>
  <td>

   Table-Grid Contents
  </td>
  </tr>
  </table>

  <td>
              <FormGroup controlId="formControlsDisabledButton"  style={buttonalignment}>
                <Button className="float-right" bsStyle="primary" type="submit" onClick={this.handleUpdate}>Save</Button>
                {'  '}
                <Button className="float-right" bsStyle="primary" type="submit" disabled>Download</Button>
                {'  '}
              </FormGroup>
            </td>


  }

}  

Answer 1

如果您使用的是react-router，请使用this.props.history.push('<url>')。

如果您遇到Cannot read property 'push' of undefined错误，可以将组件包装在withRouter中：

import { withRouter } from 'react-router';

class DisplayBlank extends Component {
  ...
}

export default withRouter(DisplayBank);

Answer 2

您好，如果您遇到以下问题

在react js中使用history.push试试这个

 import { useNavigate } from "react-router-dom";
        const history= useNavigate();
   
   history("/path");