Blazor Server on .NET 7, implemented anchor navigation using the code from text verbatim. This works great for pages in the main app. When applied to pages located in a Razor class library, navigation always routes to the main app index page - why?

I expected a hyperlink click to scroll down to a section lower in the active Razor class library page - not the main app's index page.

AnchorNavigation.razor from the class library:

@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

@implements IDisposable

@code {
    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    private IJSObjectReference? module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
       // if (firstRender)
       //     module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./SharedComponents\\AnchorNavigation.js");

        await ScrollToFragment();
    }

    public async void Dispose()
    {
       // if (module is not null)
       //     await module.DisposeAsync();

        NavigationManager.LocationChanged -= OnLocationChanged;
    }

    private async void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        await ScrollToFragment();
    }

    private async Task ScrollToFragment()
    {
        var uri = new Uri(NavigationManager.Uri, UriKind.Absolute);
        var fragment = uri.Fragment;

        if (fragment.StartsWith('#'))
        {
            // Handle text fragment (:~:text=foo)
            // /
            var elementId = fragment.Substring(1);
            var index = elementId.IndexOf(":~:", StringComparison.Ordinal);

            if (index > 0)
            {
                elementId = elementId.Substring(0, index);
            }

            if (!string.IsNullOrEmpty(elementId))
            {
                await JSRuntime.InvokeVoidAsync("BlazorScrollToId1", elementId);
            }
        }
    }
}

_Host.cshtml from the main app:

<script>
    function BlazorScrollToId1(id) {
        const element = document.getElementById(id);
        if (element instanceof HTMLElement) {
            element.scrollIntoView({
                behavior: "smooth",
                block: "start",
                inline: "nearest"
            });
        }
    }
</script>

Index.razor from the main app - this works:

...
<Common.SharedComponents.AnchorNavigation /> 
...
 <p><a href="@GetHreff(0)">0.0 Introduction</a></p> 
...

<section id="@GetIdf(0)"> 
...
<h5 class="cardB-title">Introduction</h5>
...
</section>

@code {
    string GetIdf(int i) => "header-" + i;
    string GetHreff(int i) => "#" + GetIdf(i);
}

Table of Contents from class library - this does not work, it navigates to the app's main index page.

@page "/Table of Contents"
<PageTitle>Table of Contents</PageTitle>

<Common.SharedComponents.AnchorNavigation /> 
...
 <p><a href="@GetHreff(0)">Paper 1</a></p> 
...

<section id="@GetIdf(0)"> 
...
<h2>Paper 1</h5>
...
</section>

@code {
    string GetIdf(int i) => "header-" + i;
    string GetHreff(int i) => "#" + GetIdf(i);
}