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

【问题标题】：How to redirect to a gatsby-react page with an onclick event of a component?如何使用组件的 onclick 事件重定向到 gatsby-react 页面？
【发布时间】：2019-12-17 14:45:32
【问题描述】：

我正在尝试使用组件的onClick 事件重定向到页面。由于我已经响应 gatsby 安装，是否可以使用来自 gatsby-link 的 Link 进行重定向。

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;

从上面的代码中，Overflow 组件是一个贡献组件，它可以有一个 onClick 函数。我正在尝试使用 gatsby-link 进行重定向。

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案1】：

我们可以使用来自gatsby 的navigate，而不是使用问题中提到的Link 或window.location。如下图

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;

【讨论】：

【解决方案2】：

<Link> 呈现一个锚元素 (<a href='...'>)。您可能想在这里使用navigate：https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-the-navigate-helper-function。

您可能还需要在 <OverflowMenuItem> 组件上使用 onClick 属性，具体取决于您的设置方式。

【讨论】：