title: why onclicking only the onclick function working
body: <pre><code>import React, { Component } from 'react';
  import { OverlayCartContainer,OverlayCartHeader,TotalContainer,
    ActionSection,ViewBagButton,CheckoutButton,OverlayContainerWrapper,} from './OverlayCartStyle';
  import { Link   } from 'react-router-dom'
  import { connect } from 'react-redux';
  import { OverlayCartbody } from '../../';
  
  export class OverlayCartWrapperContainer extends Component {
      constructor(){
          super();
          this.state={
            ref: React.createRef(null),
            actionRef: React.createRef(null),
          }
        }
  
        
  
    render() {
  
      
    
  
      return (
          &lt;OverlayContainerWrapper &gt; &lt;OverlayCartContainer ref={this.state.ref}&gt;
          &lt;OverlayCartHeader&gt;
                  My Bag,   &lt;span&gt;{getTotalItem()} items&lt;/span&gt;
          &lt;/OverlayCartHeader&gt;
                &lt;OverlayCartbody cartItem ={this.props.cart}/&gt;
              &lt;TotalContainer&gt;
                &lt;p&gt;Total&lt;/p&gt;
                &lt;h6&gt;{this.props.currencySymbol} {getTotalPrice(this.props.currencyState)}&lt;/h6&gt;
              &lt;/TotalContainer&gt;
              &lt;ActionSection &gt;
                &lt;Link to={&quot;/cart&quot;}&gt;&lt;ViewBagButton onClick={(e)=&gt;{this.props.toggleCart(e)}}&gt;VIEW BAG&lt;/ViewBagButton&gt;&lt;/Link&gt;
                &lt;CheckoutButton&gt;CHECKOUT&lt;/CheckoutButton&gt;
              &lt;/ActionSection&gt;
  
          &lt;/OverlayCartContainer&gt;&lt;/OverlayContainerWrapper&gt;
      )
    }
  }
  
  const  mapStateToProps = (state) =&gt;{
      return {
          currencyState:state.currency.currencyState,
          currencySymbol:state.currency.currencySymbol,
          cart:state.cart.cart.cartItems
      }
    }
  
  export default connect(mapStateToProps)(OverlayCartWrapperContainer);
  </code></pre>
  <p>Here in the <code>&lt;ActionSection &gt;&lt;Link to={&quot;/cart&quot;}&gt;&lt;ViewBagButton onClick={(e)=&gt;{this.props.toggleCart(e)}}&gt;VIEW BAG&lt;/ViewBagButton&gt;&lt;/Link&lt;CheckoutButton&gt;CHECKOUT&lt;/CheckoutButton&gt;&lt;/ActionSection&gt;</code></p>
  <p>I want when i click on view bag it redirect to cart view page it should go to cart page but the onclick function is rendering . i also want that onclick function run but page also redirect please help me how to do it this <code>onClick={(e)=&gt;{this.props.toggleCart(e)}}</code> onclick should run but it also go to the next page</p>