如何使用组件的 onclick 事件重定向到 gatsby-react 页面？

Question

I'm trying to redirect to a page using an onClick event of a component. As I have react gatsby installation is it possible to use Link from gatsby-link to redirect.

import React from  'react';
import { OverflowMenu, OverflowMenuItem } from '../Overflow';
import Link from 'gatsby-theme-carbon/src/components/Link';

class  OverflowComponent extends React.Component {

editPage(index) {
  console.log();
  // window.location.href='/edit';
  return(
    <Link to="/edit"></Link> // I'm trying to redirect 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;

from the above code the Overflow component is a contributed component and it can have a onClick function. And I'm trying to redirect using gatsby-link.

Answer 1

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;

Answer 2

<Link> renders an anchor element ( <a href='...'> ). You would probably want to use navigate here instead: https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-the-navigate-helper-function .

You might also need to use the onClick prop on the <OverflowMenuItem> component depending on how you have that setup.