href onClick Event in React

To handle a click on a React link, pass a function to its onClick prop. Give an HTML <a> a meaningful href when it should navigate; its normal navigation continues after the handler unless the handler calls event.preventDefault().

Setting an onClick Action on a Link (<a></a>) in React

Define a handler and pass its reference as onClick={handleClick} on the anchor. This self-contained JavaScript example shows a handler that writes a message; in a React component, use the same function as the anchor’s onClick value.

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

handleClick();

The example’s message appears in the browser console when the handler runs. In the component, write the anchor as <a href="/account" onClick={handleClick}>Open account</a>. The href supplies the destination, and React calls the handler for the click. Do not write onClick={handleClick()}: that calls the function while rendering instead of passing it for the click.

By default, the browser follows the anchor’s href after the handler. If the click should perform an action without navigating, accept the event and call event.preventDefault() inside the handler. This cancels that anchor navigation; it does not cancel every browser default action. For an action that is not navigation, a button is usually the appropriate element.

Setting an onClick Action on the Link Component From React Router

When an application uses React Router, its Link component handles client-side navigation. Set the destination with to, and attach the same kind of handler with onClick, for example: <Link to="/account" onClick={handleClick}>Open account</Link>. This framework-specific JSX uses the router package and is shown as an inline illustration rather than a standalone executable example.

If the handler only logs, tracks, or performs another action before navigation, let it finish without calling preventDefault(); the router can then navigate to the to route. Call event.preventDefault() only when that click should intentionally stay on the current route. An HTML anchor uses href; React Router’s Link uses to for its route destination.

Setting an onClick Action Inline Using an Arrow Function in React

For a short action used in one place, an arrow function can go directly in the prop: <a href="/account" onClick={() => console.log("Opening account")}>Open account</a>. The anchor still follows its href after the action. To suppress that navigation, accept the event in the arrow function and call event.preventDefault() deliberately.

Inline handlers are concise for a small, local action. Prefer a named handler when the logic is longer, needs to be reused, or is easier to understand outside the JSX markup.

Conclusion

Pass a function to onClick to respond to a React link click. Use an anchor’s href for browser navigation or React Router’s Link with to for a client-side route. Let navigation proceed when it is part of the interaction; call preventDefault() only when the click should cancel that link’s default navigation.