Set an onClick listener on a Link in React

avatar

Borislav Hadzhiev

Last updated: Apr 30, 2022

banner

Photo from Unsplash

Set an onClick listener on a Link in React #

To set an onClick listener on a link in React:

  1. Set the onClick prop on the link.
  2. The function you pass to the prop will get called every time the link is clicked.
App.js
import {BrowserRouter as Router, Link} from 'react-router-dom'; export default function App() { const handleLinkClick = event => { console.log('Link clicked'); // 👇️ refers to the link element console.log(event.currentTarget); }; const handleAnchorClick = event => { // 👇️ use event.preventDefault() if you want to // prevent navigation // event.preventDefault(); console.log('Anchor element clicked'); // 👇️ refers to the link element console.log(event.currentTarget); }; return ( <Router> <div> {/* 👇️ react router link */} <Link onClick={handleLinkClick} to="/about"> Go to About </Link> <br /> <br /> {/* 👇️ Anchor link */} <a onClick={handleAnchorClick} href="https://google.com" target="_blank" rel="noreferrer" > Google.com </a> </div> </Router> ); }

react link onclick

The code snippet shows how to set an onClick event listener on a React router Link or an anchor element.

Every time the link is clicked, the handleClick function is invoked.

If you need to access the link element in your handleClick function, access the currentTarget property on the event object.

The currentTarget property on the event gives us access the element that the event listener is attached to.

Whereas the target property on the event gives us a reference to the element that triggered the event (could be a descendant).

If you want to pass a parameter to the handleClick function, set the onClick prop to an inline arrow function.

App.js
import {BrowserRouter as Router, Link} from 'react-router-dom'; export default function App() { const handleLinkClick = (event, message) => { console.log('Link clicked'); console.log(message); }; const handleAnchorClick = (event, message) => { // 👇️ use event.preventDefault() if you want to // prevent navigation // event.preventDefault(); console.log('Anchor element clicked'); console.log(message); }; return ( <Router> <div> {/* 👇️ react router link */} <Link onClick={event => handleLinkClick(event, 'hello')} to="/about"> Go to About </Link> <br /> <br /> {/* 👇️ Anchor link */} <a onClick={event => handleAnchorClick(event, 'world')} href="https://google.com" target="_blank" rel="noreferrer" > Google.com </a> </div> </Router> ); }

Notice that we are passing a function to the onClick prop and not the result of calling one.

If you invoke the function when passing it to the onClick prop, e.g. onClick={handleClick()}, it would get immediately called when the component mounts.

You could use this approach to set the onClick prop on any other element, e.g. a button, a span, etc.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.