Deep links for bootstrap tabs - html

Question

I am trying to add deep linking for bootstrap tabs. It does add the tab id to the URL on each tab click but when I access the direct link (www.site.com/tabpage/#tab2) for the particular tab in a new browser window, it doesn't take me to the second tab. how can I make it work?
I need to get the direct URL to the particular tabs.
Here is the code used
HTML
<div class="tab_container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item mr-4 no-gutter">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content cisco-extralight p-4 pt-5 no-gutter">
<div role="tabpanel" class="tab-pane fade in active" id="tab1">
Tab 1 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab2">
Tab 2 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab3">
Tab 3 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab4">
Tab 4 contenrt
</div>
</div>
</div>
JS
//tab deep linking
var url = window.location.href;
if (url.indexOf("#") > 0){
var activeTab = url.substring(url.indexOf("#") + 1);
$('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');
}
$('a[role="tab"]').on("click", function() {
var newUrl;
const hash = $(this).attr("href");
newUrl = url.split("#")[0] + hash;
history.replaceState(null, null, newUrl);
});