useLinkHandler.js

// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
// Example using the Next.js App Router.
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

function useLinkHandler() {
  let router = useRouter();

  useEffect(() => {
    let onClick = e => {
      let link = e.target.closest('a');
      if (
        link &&
        link instanceof HTMLAnchorElement &&
        link.href &&
        (!link.target || link.target === '_self') &&
        link.origin === location.origin &&
        !link.hasAttribute('download') &&
        e.button === 0 && // left clicks only
        !e.metaKey && // open in new tab (mac)
        !e.ctrlKey && // open in new tab (windows)
        !e.altKey && // download
        !e.shiftKey &&
        !e.defaultPrevented
      ) {
        e.preventDefault();
        router.push(link.href);
      }
    };

    document.addEventListener('click', onClick);
    return () => {
      document.removeEventListener('click', onClick);
    };
  }, [router]);
}

this is cool

What about click with Enter when the anchor is focused?

Browsers fire the "click" event on Enter key press as well.

The MDN docs for button seems to imply button could be remapped for left-handed use, so I wonder if e.button === 0 is not strictly always correct.