Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React JS : history.push is not a function error and it isn't navigating to a different page onclick of swal

I have been using react js for the past couple of months and just got to know about the sweetalert bootstrap plugin for react. on update of a component successfully a dialog appears onscreen. upon clicking the "click here" button history.push is invoked and it should route to a different page but I have been getting error

history.push is not defined.

I have googled quite a few stuff and tried quite a few scenarios but haven't been successful in it.

code snippet:

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>


  }

}  
like image 962
Ice_Queen Avatar asked Dec 10 '18 20:12

Ice_Queen


2 Answers

hi there if you are facing the issue with

history.push in react js try this

 import { useNavigate } from "react-router-dom";
        const history= useNavigate();
   
   history("/path");
like image 160
Muhammad Awais Avatar answered Oct 31 '22 20:10

Muhammad Awais


If you're using react-router, use this.props.history.push('<url>').

If you're stumbling across a Cannot read property 'push' of undefined error, wrap the component in withRouter:

import { withRouter } from 'react-router';

class DisplayBlank extends Component {
  ...
}

export default withRouter(DisplayBank);
like image 41
Nino Filiu Avatar answered Oct 31 '22 19:10

Nino Filiu