Bootstrap Navbar Dropdown is not working as expected in my Blazor application

When I first load my Blazor project, it comes up at https://localhost:5003/.

I have six pages annotated with @page. On one page Reader.razor I am using a Bootstrap NavBar with Dropdown.

@page "/reader"
<div class="container" id="myContainer" aria-labelledby="fullMessageBodyLabel">
    <div class="bg-dark text-light">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <h6 class="card-title" id="myLabel"> Some Label Text Here ...</h6>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="2em" height="2em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M16.59 5.59L18 7l-6 6l-6-6l1.41-1.41L12 10.17l4.59-4.58m0 6L18 13l-6 6l-6-6l1.41-1.41L12 16.17l4.59-4.58z" fill="currentColor" /></svg>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">Menu Item #1</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #2</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #3</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #4</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #5</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
@code {
    // Code here ...
}

My Bootstrap NavBar Dropdown

Here is the problem I am having. If I navigate to my page like so:

https://localhost:5003/reader?id=1234&value=somevalue

Then click on the dropdown link (the down chevron .SVG), Blazor sends me back to here:

https://localhost:5003/

Then, when I click the browser back button to go here again:

https://localhost:5003/reader?id=1234&value=somevalue

And click the dropdown link again, the dropdown will function as expected … until I refresh/reload the page.

What do I need to do to get Blazor from sending me back to the root page on the NavBar Dropdown click?