How to handle "intention to open link in new page" in a SPA application?

Question

Well in my (react) single page application I have a lot of "internal links". These links work by changing the url using a router store. (Mobx+react).

As html standards warn against using href without an actual href, and if one uses on_click event a button -styled to look like a link- should be used.

This works perfectly fine. Except now that I wish to improve use, I wish to allow consumers to press ctrl+click, middle mouse or whatever the keybind is of the esoteric browser the user uses, to "open link in a new tab".

Is there a way to get the "intention" of a click by the browser? - Ie to see if the user's intention was to open the link (button) in a new tab?

Without letting the user reload the page if clicked on the link normally?

Or from the other side: how can I prevent a full page reload when clicking on a link that is a relative url and opens in the same window?

Answer 1

Try using Link, it works both ways:

import {Link} from 'mobx-router';

Answer 2

So.. React-router-dom has a component called "Link". Which handles this use case perfectly..

Here's the code snippet from the Link component copied from react-routerrepo.

function isModifiedEvent(event) {
  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
}

function LinkAnchor({ innerRef, navigate, onClick, ...rest }) {
  const { target } = rest;

  return (
    <a
      {...rest}
      ref={innerRef} // TODO: Use forwardRef instead
      onClick={event => {
        try {
          if (onClick) onClick(event);
        } catch (ex) {
          event.preventDefault();
          throw ex;
        }

        if (
          !event.defaultPrevented && // onClick prevented default
          event.button === 0 && // ignore everything but left clicks
          (!target || target === "_self") && // let browser handle "target=_blank" etc.
          !isModifiedEvent(event) // ignore clicks with modifier keys
        ) {
          event.preventDefault();
          navigate();
        }
      }}
    />
  );
}

You can just modify this component a bit to suit your use case. Try and make this an HOC or may be use renderProps pattern to render your content inside this anchor link

Hope this helps..

Answer 3

Like stated in other answers, the easiest thing is to not preventDefault when shift or control is present. However in my case another thirdparty component (PatternFly) handles the actual navigation events and implement preventDefault, so I had to come up with a global solution.

I solved this by stopping event propagation at the capture phase of the document.

This will stop custom link events (with preventDefault calls) further down the DOM and let the default link logic kick in.

Here is a typescript example, which also takes into account if the link is external:

document.addEventListener('click', (event: MouseEvent) => {  
  const target = event.target;
  if (target instanceof Element
    && (target as Element).baseURI
    && !isExternalUrl((target as Element).baseURI)
  ) {
    if (event.ctrlKey || event.shiftKey) {
      event.stopPropagation();
    }
  }
}, true);

and isExternalUrl being something like

function isExternalUrl (url: string): boolean {
  const host = window.location.hostname;

  // Initialize as Relative URL
  var linkHost = host;
  if (/^https?:\/\//.test(url)) {
    // Absolute URL.
    // The easy way to parse an URL, is to create <a> element.
    // @see: https://gist.github.com/jlong/2428561
    var parser = document.createElement('a');
    parser.href = url;
    linkHost = parser.hostname;
  }

  return host !== linkHost;
}

Answer 4

function Anchor(props) {
    const {href, children} = props;
    function handleClick(e) {
        if (e.ctrlKey || e.shiftKey || e.metaKey || e.altKey) return; // let the browser handle
        e.preventDefault(); // take over
        try {
            window.history.pushState(null, null, href);
        } catch {
            window.location.assign(href);
        }
    }
    return <a {...props} onClick={handleClick}>{children}</a>
}

Usage, just like an <a> tag:

<Anchor href="/other-page">Go to Other Page</Anchor>