In this article, I’ll show you how to set onClick handler on <Link> components.

Set onClick on <Link> component

First, let’s take a look at a typical <Link> component:

<Link to="/home">Go to home page</Link>

When users click the Link, it’ll take them to the relative URL specified in the to prop.

We can set the onClick event handler on <Link> custom component. Syntax is normal, exactly like setting onClick for any other React element.

<Link to="/home" onClick={() => doSomething()}>Go to our contact page</Link>

Use curly braces and set onClick to a callback function.

In the example, <Link> will take users to a different URL path and also execute the doSomething() function.

You can use onClick event handler to do various things – update a state value, make a call to the API to check credentials, and so on.

Downside of setting onClick on <Link>

By setting the onClick event handler on the <Link> component, you interfere with its main goal – navigating to the specified URL when it is clicked.

After setting onClick, <Link> does two things when clicked:

  • Execute the event handler
  • Takes users to specified path

React executes event handler first, and then takes users to specified path. There’s usually a small delay before React Router takes users to a different URL.

Possible solution

When users navigate to a different path, usually we have a <Route> component that renders a component for that path.

In some cases, you can use useEffect() to replace onClick() and run a certain JavaScript code when the component first mounts, or re-renders.

So instead of this:

User clicks a Link -> event handler is executed -> there’s a delay -> new page

You can have this:

User clicks link -> immediately navigate to a different page -> execute code when component renders

This approach isn’t perfect either. If the user directly visits a page (without clicking on the <Link> component), useEffect() will run anyway.

Still, sometimes you can use this approach for fast navigation and to run additional JavaScript code.

If you want the code to run only when users click the <Link> component, consider the alternative approach.

Alternatives to setting onClick on <Link>

You can navigate to a different page without using the <Link> custom component.

Instead, you can set onClick event handler on elements like <span>, <button>, and programmatically navigate to a different page by using push() on the history prop.

Every component rendered via react-router has access to history prop. Call the push() method and pass one argument – the relative path from the current page.

export default function App(props) {
  const navigate = useNavigate()
  const handleClick = () => {
    console.log("hello, world");
    props.history.push("/somepage")
  };

  return <span onClick={() => handleClick()}>Click me to change URL</span>;
}

The newest version of react-router supports the useNavigate() hook as well.

Here’s how to use useNavigate() to programmatically change the URL:

export default function App() {
  const navigate = useNavigate()
  const handleClick = () => {
    console.log("hello, world");
    navigate("/somepage")
  };
  return <span onClick={() => handleClick()}>Click me to change URL</span>;
}

useNavigate() returns a function that changes URL to the path specified as a string argument. Don’t forget to initialize navigate variable to an instance of the useNavigate() hook.

Handling Events