Link to part of the Blazor WASM page

Question

How do I link to a section of a Blazor WASM page?

Documentation.razor code:

@page "/documentation"
....
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Groups</th>
            </tr>
        </thead>
        @foreach (var group in groups.Where(g => !string.IsNullOrEmpty(g)))
        {
            <tr><td><a href="#@gIndex">@group</a></td></tr>
            gIndex++;
        }

        <tr><td><a href="#@gIndex">Others...</a></td></tr>
    </table>

The above code creates a list of groups with hyperlinks as shown below:

/#0
/#1
/#2
/#3

However, when I click on the links, they route me to the root of the web application rather than being part of the current page, like

/documentation#0
/documentation#1
/documentation#2
/documentation#3

If I go to /documentation in the browser and append the sections manually, the browser does the appropriate redirects.

I tried hardcoding the route like a href="documentation#@gIndex" but that didn't do anything.

Any ideas how to get a hyperlink to a section on the same page to work?

Answer 1

This bug was raised a long time ago, please focus here: Hash routing to named elements

Try changing the link as follows:

@group