web-dev-qa-db-fra.com

Comment rediriger vers une page gatsby-react avec un événement onclick d'un composant?

J'essaye de rediriger vers une page en utilisant un événement onClick d'un composant. Comme j'ai réagi à l'installation de gatsby, il est possible d'utiliser Link de gatsby-link pour rediriger.

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;

à partir du code ci-dessus, le composant Overflow est un composant contributif et il peut avoir une fonction onClick. Et j'essaye de rediriger en utilisant gatsby-link.

javascriptreactjsgatsby
3
Lalas M

Au lieu d'utiliser Link ou window.location comme mentionné dans la question, nous pouvons utiliser navigate de gatsby. Comme indiqué ci-dessous

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> rend un élément d'ancrage (<a href='...'>). Vous voudrez probablement utiliser navigate ici à la place: https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-the-navigate-helper-function .

Vous devrez peut-être également utiliser la prop onClick sur le <OverflowMenuItem> composant selon la façon dont vous avez cette configuration.

0
Michael Rodriguez