Blazor navlink route not found from home component

I'm new to blazor and I'm struggling to get a simple navlink to a new page to work.

I'm using the basic webassembly template in visual studio that has the home page along with mainlayout etc..

I've created a second page "eventdisplay" and my navlink on my home page has a simple href="/eventdisplay" attribute that should route to my empty component. However whenever I debug my app says "sorry nothing as this address which means the route to that component can be found I assume.

After a lot of trial and error I found that from the launch URL Localhost:2332/ I get nothing found error

If I manually navigate to the URL hoever Localhost:2332/home the page is fine, I can click the navlink and my new page is displayed perfectly.

Any ideas what is going on here and how can I fix this? Thanks.

my home component is here:@inject HttpClient Http@implements IDisposable@inject SportIdState StateSportId@page "/home"@if (Competitions is not null && Competitions.Any()){@if (StateSportId.SportId == 13 || StateSportId.SportId == 23 || StateSportId.SportId == 19){    //add alt sport displays}else{    @foreach (CompetitionDto c in Competitions)    {          <div class="container"><div class="row"><div class="col-12"><div class="text-left" style="min-width: 0; text-overflow: ellipsis; overflow: hidden;"><NavLink Style="justify-content: left; font-weight: bold" href="/eventdisplay">                            @c.Venue</NavLink>                        @* <NavLink Style="justify-content: left; font-weight: bold" href='@($"/EventDisplay?compId={c.CompetitionId.ToString()}&raceId=1")'>                            @c.Venue</NavLink> *@</div></div></div><div class="row"><div class="col-12">                    @foreach (var e in c.Events.Select((value, index) => (value, index)))                    {<NavLink class="button button-primary raceButton" href="/eventdisplay">@e.value.StartTime.ToString("HH:mm")</NavLink>                        @* <NavLink class="button button-primary raceButton" href='@($"/EventDisplay?compId={c.CompetitionId}&eventId={e.value.EventId}&raceId={e.index}")'>@e.value.StartTime.ToString("HH:mm")</NavLink> *@                    }</div></div></div>    }}}             @code {[CascadingParameter(Name = "id")]public int id { get; set; } = new();[CascadingParameter]public TimeSpan? StartAutoPriceTime { get; set; }private List<CompetitionDto> Competitions { get; set; } = new List<CompetitionDto>();protected override void OnInitialized(){    StateSportId.OnChange += HandleStateChange;}private bool isFetching = false;private async void HandleStateChange(){    if (isFetching) return;    isFetching = true;    await GetCompeitions();    isFetching = false;    InvokeAsync(StateHasChanged); // Ensure UI updates after API call}protected override async Task OnParametersSetAsync(){    try    {        if (StateSportId.SportId > 0 && id > 0)        {            await GetCompeitions();        }    }    catch (Exception ex)    {        throw ex;    }}protected async Task GetCompeitions(){    try    {        if (StateSportId.SportId > 0 && id > 0)        {            var request = $"api/competitions/?CompetitionId={null}&id={id}&Sportid={StateSportId.SportId}&homepage={true}&StartAutoPriceTime={StartAutoPriceTime.ToString()}";            Competitions = await Http.GetFromJsonAsync<List<CompetitionDto>>($"api/competitions/?CompetitionId={null}&id={id}&Sportid={StateSportId.SportId}&homepage={true}&StartAutoPriceTime={StartAutoPriceTime.ToString()}");        }    }    catch (Exception ex)    {        throw ex;    }}public void Dispose(){    StateSportId.OnChange -= StateHasChanged;}    }

and my new component is here.

@page "/eventdisplay"<h3>EventDisplay</h3>@code {    // public int EventId { get; set; }        // public int CompetitionId { get; set; }    // public int RaceId { get; set; }}

I'm sure this is something simple but i just can't see what the fix would be. Thanks.