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>
}
}
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");
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With