How to redirect to a gatsby-react page with an onclick event of a component?

Instead of using Link or window.location as mentioned in the question we can use navigate from gatsby. As shown below

import React from  'react';
import { OverflowMenu, OverflowMenuItem } from '../Overflow';
import {navigate} from 'gatsby'; //import navigate from gatsby

class  OverflowComponent extends React.Component {

editPage(index) {
  navigate('/edit'); //navigate to edit page
}

deletePage() {
  console.log("Delete clicked");
}

  render(){ 
    return (
      <div>
        <OverflowMenu flipped={true}>
            <OverflowMenuItem  itemText="Edit" primaryFocus onClick={() => this.editPage()} />
            <OverflowMenuItem  itemText="Delete" onClick={() => this.deletePaget()} />
        </OverflowMenu>
      </div>
    );
  }
}

export default OverflowComponent;