web-dev-qa-db-ja.com

コンポーネントのonclickイベントでgatsby-reactページにリダイレクトする方法は？

コンポーネントの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を使用してリダイレクトしようとしています。

javascriptreactjsgatsby
3
Lalas M

質問で述べたようにLinkまたはwindow.locationを使用する代わりに、navigateからgatsbyを使用できます。以下に示すように

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;
3
Lalas M

<Link>はアンカー要素（<a href='...'>）をレンダリングします。代わりにここでnavigateを使用することをお勧めします： https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-the-navigate-helper-function 。

その設定によっては、<OverflowMenuItem>コンポーネントでonClickプロップを使用する必要がある場合もあります。

0
Michael Rodriguez