React JS: history.Push n'est pas une erreur de fonction et il ne navigue pas vers une autre page en cliquant sur Swal

Question

J'utilise react js depuis quelques mois et je viens de découvrir le module sweetalert bootstrap pour réagir. Lors de la mise à jour réussie d'un composant, une boîte de dialogue apparaît à l'écran. En cliquant sur le "clic" ici "historique du bouton. Push est invoqué et il devrait être redirigé vers une autre page mais j'ai une erreur

history.Push n'est pas défini.

J'ai googlé pas mal de trucs et essayé pas mal de scénarios mais je n'y suis pas parvenu.

extrait de code:

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

Si vous utilisez react-router , utilisez this.props.history.Push('<url>').

Si vous tombez sur un Cannot read property 'Push' of undefined erreur, enveloppez le composant dans withRouter :

import { withRouter } from 'react-router';

class DisplayBlank extends Component {
  ...
}

export default withRouter(DisplayBank);