Evento Href onClick en React

Para gestionar un clic en un enlace de React, pasa una función a su propiedad onClick. Si un elemento HTML <a> debe navegar, asígnale un href significativo; la navegación normal continúa después del controlador, salvo que este llame a event.preventDefault().

Cómo asignar una acción onClick a un enlace (<a></a>) en React

Define un controlador y pasa su referencia al ancla mediante onClick={handleClick}. Este ejemplo autónomo de JavaScript muestra un controlador que escribe un mensaje; en un componente de React, usa esa misma función como valor de onClick del ancla.

function handleClick() {
  console.log("You clicked the link!");
}

handleClick();

El mensaje del ejemplo aparece en la consola del navegador cuando se ejecuta el controlador. En el componente, escribe el ancla así: <a href="/account" onClick={handleClick}>Open account</a>. href proporciona el destino y React llama al controlador cuando se produce el clic. No escribas onClick={handleClick()}: eso ejecuta la función durante el renderizado, en lugar de pasarla para que se ejecute al hacer clic.

De forma predeterminada, el navegador sigue el href del ancla después de ejecutar el controlador. Si el clic debe realizar una acción sin navegar, recibe el evento y llama a event.preventDefault() dentro del controlador. Esto cancela la navegación de esa ancla; no cancela todas las acciones predeterminadas del navegador. Para una acción que no sea de navegación, suele ser más apropiado usar un botón.

Cómo asignar una acción onClick al componente Link de React Router

Cuando una aplicación usa React Router, su componente Link gestiona la navegación del lado del cliente. Define el destino con to y añade un controlador del mismo tipo con onClick; por ejemplo: <Link to="/account" onClick={handleClick}>Open account</Link>. Este JSX específico del framework usa el paquete del enrutador y se presenta como una ilustración en línea, no como un ejemplo ejecutable independiente.

Si el controlador solo registra un mensaje, hace seguimiento u otra acción antes de navegar, deja que termine sin llamar a preventDefault(); entonces el enrutador puede navegar a la ruta indicada en to. Llama a event.preventDefault() únicamente cuando quieras que ese clic permanezca intencionalmente en la ruta actual. Un ancla HTML usa href; el componente Link de React Router usa to para indicar su ruta de destino.

Cómo asignar una acción onClick en línea con una función flecha en React

Para una acción breve que se usa en un solo lugar, puedes escribir una función flecha directamente en la propiedad: <a href="/account" onClick={() => console.log("Opening account")}>Open account</a>. El ancla sigue su href después de la acción. Para evitar esa navegación, recibe el evento en la función flecha y llama deliberadamente a event.preventDefault().

Los controladores en línea son concisos para acciones pequeñas y locales. Es preferible usar un controlador con nombre cuando la lógica es más extensa, debe reutilizarse o resulta más fácil de entender fuera del marcado JSX.

Conclusión

Pasa una función a onClick para responder al clic en un enlace de React. Usa el href de un ancla para la navegación del navegador o el componente Link de React Router con to para una ruta del lado del cliente. Deja que la navegación continúe cuando forme parte de la interacción; llama a preventDefault() solo cuando el clic deba cancelar la navegación predeterminada de ese enlace.