Configurar el controlador de eventos onClick en el componente de enlace

1. Componente Link en React
2. Manejar el evento onClick para el componente Link en React

La configuración de controladores de eventos es una parte importante de la creación de una aplicación React.

onClick es uno de los eventos más comunes, generalmente definido en los elementos <button> y <span>. En este artículo, veremos cómo configurar un controlador de eventos para el componente Link.

Componente Link en React

React Router es la biblioteca principal para configurar la navegación en React.

Le brinda todos los componentes básicos necesarios para construir un sistema de navegación. Link es uno de los componentes más importantes que React Router pone a disposición.

Este componente es una alternativa mucho más avanzada a la etiqueta <a> en HTML. Las personas a menudo usan componentes de Link para crear menús de navegación o enlaces únicos a páginas dentro de la aplicación.

El componente acepta muchos apoyos, pero el to es probablemente el más importante. Este accesorio nos permite especificar la ruta relativa a la página de inicio, donde debe navegar el componente Link.

Veamos un ejemplo:

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

Suponiendo que nuestra página de inicio sea www.homepage.com, hacer clic en este enlace nos llevaría a www.homepage.com/contact. Cuando ocurre el evento de clic, el comportamiento predeterminado del componente Link es navegar a la ruta especificada.

Sin embargo, ¿qué pasa si queremos realizar otra operación además del comportamiento predeterminado?

Atributo onClick

El componente Link también acepta un atributo onClick, que debe establecerse igual a una función de controlador (o una referencia a ella) entre llaves. Veamos un ejemplo sencillo:

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>
  ); 
}

En este sencillo ejemplo, tenemos un componente Link.

Según el comportamiento por defecto, al pulsarlo nos llevará a la ruta /page. Sin embargo, dado que especificamos el atributo onClick, también actuará como controlador de eventos.

En este caso, alertará con un simple texto. Puedes echar un vistazo a codesandbox para probarlo tú mismo.

Tenga en cuenta que las llaves son necesarias para garantizar que la expresión entre ellas se trate como un JavaScript válido.

Manejar el evento onClick para el componente Link en React

A menos que esté 100% seguro de que su componente Link necesita un controlador de eventos onClick, es mejor operar de otra manera.

La configuración de un controlador de eventos separado retrasará la navegación y anulará el propósito de usar los componentes Link en primer lugar. La navegación se retrasará porque el componente ejecutará primero el controlador de eventos y luego navegará por la ruta.

Aún así, a veces es necesario realizar una determinada operación cuando el usuario llega a una página específica de su aplicación. Puede hacerlo cambiando el método de bucle de vida componentDidMount() del nuevo componente (o gancho useEffect()) en su lugar.

De esta manera, aún puede ejecutar una función cuando el usuario llega a una página. Y no habrá retrasos en la navegación.

Si revisa el enlace de ejemplo usted mismo, notará la demora.