Bootstrap 4 Вкладки глубокого связывания и ajax?

Question

Я создаю веб-сайт, где моя навигационная панель выполняется с помощью вкладок Bootstrap 4. Я хочу реализовать глубокую ссылку на конкретные вкладки для SEO и по общим причинам, в формате site.com/tab

Я пытался реализовать это решение, которое приводит меня к двум проблемам:

1. URL для конкретной вкладки site.com/#tab, как мне избавиться от лишнего #?

2. Я используюajax на сайте, и это решение нарушает его, например, в моей подписке на электронную рассылку ничего не происходит, и ссылка становится site.com/?email=example.email%40gmail.com&submit=#tab

Вот используемый jquery:

$(document).ready(() => {
  let url = location.href.replace(/\/$/, "");

  if (location.hash) {
    const hash = url.split("#");
    $('#navbar a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/\/#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  }

  $('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#home") {
      newUrl = url.split("#")[0];
    } else {
      newUrl = url.split("#")[0] + hash;
    }
    history.replaceState(null, null, newUrl);
  });
});

Как я могу это исправить? Любая помощь очень ценится, спасибо!