Let's take a look at this simple React Link component:

import * as React from "react";

export function Link({ href, label, icon }) {
    return (
        <a href={href} target="_blank" rel="noopener">
          <span className={icon}></span>
          <span>{label}</span>
        </a>
    );
}

It renders an anchor tag that opens urls in new tabs. It's structured in a way that it contains two children to properly display an icon and a label.

Let's imagine that this component is rendered in a legacy Durandal app so that both libraries live together to power up the frontend layer.

Durandal Router intercepts all <a> clicks to take care of history navigation. If a link contains target attribute that is _blank, it means Durandal shouldn’t handle such a click and let the browser (or other listener) do the job.

The problem here is that click event contains target prop that points at the <span>, not <a> element. So Durandal can’t correctly determine that the navigation should be exclusively done by the browser.

And because Durandal registers its listener first, there’s no way for React to override that behaviour with its own click listener.

The fix that I used was to set pointer-events: none; at the children of React-rendered <a>. This way the child won’t capture clicks, Durandal will correctly examine <a> element for its target attribute and click can be handled either by React listener or by browser typically as a click on a link.