I’m trying to set up a navigation where the links are set by appsettings.json values. Maybe there is a much better way to do this without Javascript?

This is my component, named Navigation.razor

@inject IConfiguration Configuration
@inject IJSRuntime JSRuntime

<a id="test-link">Test</a>

<script>
    function SetNavlinks(url){
        var a = document.getElementById('test-link')
        a.setAttribute("href", url);
    }
</script>

@code{
    protected override async Task OnInitializedAsync()
    {       
        await InitializeNavigation();
        InvokeAsync(StateHasChanged);
    }

    Task InitializeNavigation(){
        var testLinkURL = Configuration.GetValue<string>("ContentURLs:Values:TestLink");
        JSRuntime.InvokeVoidAsync("SetNavlinks", testLinkURL);
        return Task.CompletedTask;
    }
}

The problem is after the page loads the DOM looks like this:

<a id="test-link">Test</a>

But if use document.getElementById('test-link') in the dev console, it shows this:

<a href="https://itworks.com" id="test-link">Test</a>