title: How to redirect to another page in react confirmAlert?
body: <p>I am developing a react shopping cart app. If the user click on 'Clear Cart' button, the entire cart will be cleared. Before that the application should confirm the action and therefore, I used 'React Confirm Alert'. If the user click on 'Yes' button, it will clear the cart and it should navigate to the root page('/'). I searched over the internet and on the StackOverflow and tried the three ways given <a href="https://stackoverflow.com/a/50645395/13353216">here</a>. But nothing worked. For both <code>this.props.history.push('/')</code> and <code>this.props.router.push('/')</code> gives me a TypeError saying undefined object and for <code>useHistory()</code> it says violating react hooks principles. Is there anything I can do to make this work? Thanks in advance!</p>
  
  <p>Code :-</p>
  
  <pre><code>import React, { useEffect, useState, Component} from 'react';
  
  import Titles  from "../Titles";
  import CartColumns from './CartColumns';
  import EmptyCart  from "./EmptyCart";
  
  import CartList from "./CartList";
  import {connect} from "react-redux";
  import {Link, Redirect} from "react-router-dom";
  import Axios from "axios";
  import { confirmAlert } from 'react-confirm-alert'; // Import
  import 'react-confirm-alert/src/react-confirm-alert.css' // Import css
  
  const mapStateToProps = ({ session, history}) =&gt; ({
      session, history
  });
  
  class Cart extends Component {
  
      constructor() {
          super();
          this.removeItem = this.removeItem.bind(this);
      }
  
      state = {
          Cart: [],
          total : 0,
          discount: 0
      };
  
      componentDidMount() {
          if(this.props.session.userId !== null){
              this.getItems();
          }
      }
  
      getItems = () =&gt; {
          //function to get the items
      };
  
      removeItem = (productId) =&gt; {
          //method to remove an item
      };
  
      clearCart = () =&gt; {
  
          confirmAlert({
              title: 'Clear Cart',
              message: 'Are you sure to clear the Cart?',
              buttons: [
                  {
                      label: 'Yes',
                      onClick: () =&gt; {Axios.get('http://localhost:8000/api/cart/clearCart', {params:{userId: this.props.session.userId}}); 
                                      } //I want to redirect from here
                  },
                  {
                      label: 'No'
                  }
              ]
          })
      };
  
      checkout= () =&gt; {
          //Checkout function
      };
  
      render() {
          let total = this.state.total;
          let discount = this.state.discount;
  
          if(this.props.session.username !== null){
              return (
                  &lt;section&gt;
                      {(this.state.Cart.length &gt; 0) ? (
                          &lt;React.Fragment&gt;
                              &lt;Titles name ="Your " title = "Cart"&gt;Cart&lt;/Titles&gt;
                              &lt;CartColumns/&gt;
                              &lt;CartList cart = {this.state.Cart} removeItem={this.removeItem}/&gt;
                              &lt;div className="container"&gt;
                                  &lt;div className="row"&gt;
                                      &lt;div className="col-10 mt-2 ml-sm-5 ml-md-auto col-sm-8 text-capitalize text-right"&gt;
                                          &lt;h5&gt;
                                              &lt;span className="text-title"&gt;Sub Total: &lt;/span&gt;
                                              &lt;strong&gt;$ {total}&lt;/strong&gt;
                                          &lt;/h5&gt;
                                          &lt;h5&gt;
                                              &lt;span className="text-title"&gt;Discount: &lt;/span&gt;
                                              &lt;strong&gt;$ {discount}&lt;/strong&gt;
                                          &lt;/h5&gt;
                                          &lt;h5&gt;
                                              &lt;span className="text-title"&gt;Total: &lt;/span&gt;
                                              &lt;strong&gt;$ {total - discount}&lt;/strong&gt;
                                          &lt;/h5&gt;
  
  
                                              &lt;div className="col-10 mt-2 ml-sm-5 ml-md-auto col-sm-8 text-capitalize text-right"&gt;
                                                  &lt;button className="btn btn-outline-danger text-uppercase mb-3 px-5" type="button" onClick={this.clearCart}&gt;Clear Cart&lt;/button&gt;
                                                  &lt;button className="btn btn-outline-info ml-3 text-uppercase mb-3 px-5" type="button" onClick={this.checkout}&gt;Check Out&lt;/button&gt;
                                              &lt;/div&gt;
  
  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/React.Fragment&gt;
                      ) : (
                          &lt;EmptyCart/&gt;
                          )
                      }
                  &lt;/section&gt;
              );
          } else {
              return(
                  &lt;Redirect to="/login" /&gt;
              );
          }
  
      }
  }
  
  export default connect(
      mapStateToProps
  )(Cart);
  </code></pre>