The react-router library provides essential custom components for navigating React web applications.

In this article, we’ll focus on <Link>, the custom component similar to an anchor (<a>) tag in normal HTML.

We’ll show you how to set an onClick handler, so when users click <Link>, React will run a JavaScript function.

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, but also execute the doSomething() function.

You can use onClick in many different ways – update a state value, make a call to the API to check credentials, and so on.

Downside of setting onClick on <Link>

If you set the onClick event handler on <Link> component, you change its default behavior.

Every time user clicks a button, <Link> does two things:

  • 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

Clicking a <Link> component takes users to a different URL. Typically your web application has a custom <route> to render specific components for that URL.

In some cases, you can use useEffect() to replace onClick() and run a certain JavaScript code when 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

You’ll have to execute code in the useEffect() hook.

This approach isn’t perfect either. If user directly visits a page (without clicking on the <Link> component), useEffect() will execute the code. You might need to run the code only if user clicks the button.

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

Alternatives to setting onClick on <Link>

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

Any component rendered via react-router has access to history prop. Call the push() method and pass one argument – relative path from 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>;
}

You can set onClick event handler on <span>, <button> or any other React element.

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

You must not forget to initialize navigate variable to an instance of useNavigate() hook.