nav tab toggle showing # in URL

Question

The profile URL

routes.MapPageRoute( "ProfileRoute", "Profile/{userid}", "~/Profile.aspx" );

the userid is fetched from database with the user, currently logged in. In the Profile web-form, I have the following tab panes

<div class="collapse navbar-collapse justify-content-center fixed" id="collapsibleNavbar">
<ul class="nav nav-tabs" id="mainTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="hometab" data-toggle="tab" name="home" href="#home" aria-controls="home" aria-selected="true" style="font-size: 90%; text-align:center;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="protab" data-toggle="tab" href="#Profile" name="profile" aria-controls="profile" aria-selected="true" style="font-size: 90%; text-align:center;">Profile</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane container active" id="home" aria-labelledby="hometab" data-ride="tab">
...
</div>
<div class="tab-pane container active" id="Profile" aria-labelledby="protab" data-ride="tab">
...
</div>
</div>

when I toggle the tab pane, the URL shows "Profile/userid/#home" or "Profile/userid/#Profile" and the tab pane does not activate. I'm working with bootstrap 4.5 in asp.net web-forms.