Configurer le gestionnaire d'événements onClick sur le composant de lien

1. Composant Link dans React
2. Gérer l’événement onClick pour le composant Link dans React

La configuration des gestionnaires d’événements est une partie importante de la création d’une application React.

onClick est l’un des événements les plus courants, généralement défini sur les éléments <button> et <span>. Dans cet article, nous allons passer en revue la configuration d’un gestionnaire d’événements pour le composant Link.

Composant Link dans React

React Router est la bibliothèque principale pour configurer la navigation dans React.

Il vous donne tous les éléments de base nécessaires pour construire un système de navigation. Link est l’un des composants les plus importants mis à disposition par React Router.

Ce composant est une alternative beaucoup plus avancée à la balise <a> en HTML. Les gens utilisent souvent des composants Link pour créer des menus de navigation ou des liens ponctuels vers des pages de l’application.

Le composant accepte de nombreux props, mais le to est probablement le plus important. Ce prop nous permet de spécifier le chemin relatif à la page d’accueil, où le composant Link doit naviguer.

Regardons un exemple :

<Link to="/contact">Contact Us</Link>

En supposant que notre page d’accueil est www.homepage.com, cliquer sur ce lien nous amènerait à www.homepage.com/contact. Lorsque l’événement de clic se produit, le comportement par défaut du composant Link est de naviguer vers le chemin spécifié.

Cependant, que se passe-t-il si nous voulons effectuer une autre opération en plus du comportement par défaut ?

Attribut onClick

Le composant Link accepte également un attribut onClick, qui doit être égal à une fonction de gestionnaire (ou à une référence à celle-ci) entre accolades. Prenons un exemple simple :

import "./styles.css";
import { Link, BrowserRouter } from "react-router-dom"
export default function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Link to="/page" onClick={() => alert("boo")}>Clickable Link</Link>
    </div>
    </BrowserRouter>
  ); 
}

Dans cet exemple simple, nous avons un composant Link.

Selon le comportement par défaut, cliquer dessus nous amènera à la route /page. Cependant, puisque nous avons spécifié l’attribut onClick, il agira également en tant que gestionnaire d’événements.

Dans ce cas, il alertera un simple texte. Vous pouvez jeter un œil à codesandbox pour l’essayer vous-même.

Notez que les accolades sont nécessaires pour s’assurer que l’expression entre elles est traitée comme un JavaScript valide.

Gérer l’événement onClick pour le composant Link dans React

A moins que vous ne soyez certain à 100% que votre composant Link a besoin d’un gestionnaire d’événements onClick, il est préférable d’opérer autrement.

La configuration d’un gestionnaire d’événements séparé retardera la navigation et annulera l’objectif d’utiliser les composants Link en premier lieu. La navigation sera retardée car le composant exécutera d’abord le gestionnaire d’événements et naviguera ensuite dans le chemin.

Néanmoins, vous devez parfois effectuer une certaine opération lorsque l’utilisateur accède à une page spécifique de votre application. Vous pouvez le faire en modifiant à la place la méthode de cycle de vie componentDidMount() du nouveau composant (ou le crochet useEffect()).

De cette façon, vous pouvez toujours exécuter une fonction lorsque l’utilisateur atteint une page. Et il n’y aura pas de retards dans la navigation.

Si vous consultez vous-même l’exemple de lien, vous remarquerez le retard.