A workaround that I can think of is to find all the anchors that has hash (thru regex?) and replace it with a custom behavior that will make it scroll into an element. Something like

document.getElementById("hash").scrollIntoView()

I've tried something similar (with window.scrollTo()), but reactJs still reacts to that click with a navigation event. The document gets scrolled to the anchor position, but half a second after that, it navigates to the page I mentioned in the post.

is it the anchor causing it? maybe can be replace by span with a style similar to an anchor.

Actually it's related to the click on an "<a href" tag. It's always interpreted by react router engine as a navigate link. Have a look at this: https://stackoverflow.com/questions/48223566/using-anchor-tags-in-react-router-4

yes but what I am trying to suggest is if you can replace the anchor tag with a span tag and have an onclick to it so that you won't experience the issue. I am assuming that a replacement can be made before binding to the div

I'll give it a try.

John, it worked like a charm! Thank you very much for your help.

Here is what I needed to do. But your 2 tips combined made the trick. In summary one needs to use this workaround. Replace the "a" tag with any other html tag with an onclick javascript scrollIntoView function bound to it.

Here is my code so it can help others:

As I have my html embedded in an iframe, I needed to hack the iframe a bit.

var iframe = document.getElementById('IFrame');
var doc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

var links = doc.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    if (links[i].href.indexOf('#') > -1) {
        var outer = links[i].outerHTML;
        outer = outer.replace("<a ", "<span class='SpanClick' data-");
        links[i].outerHTML = outer.replace("</a>", "</span>");
        i--;  // needed because I'm changing the loop elements
    }
}

var links = doc.getElementsByClassName('SpanClick');

for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {
        var dataHref = this.getAttribute('data-href');
        var hashPosition = dataHref.indexOf('#');
        var href = dataHref.substring(hashPosition + 1, dataHref.length);
        var iframe = document.getElementById('IFrame');
        var doc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
        doc.getElementsByName(href)[0].scrollIntoView();
    }
}

Welcome. Just one comment on the replace. There could be external links that will contain "#", I will suggest to be more specific on the index location.