Blazor navlink route not found from home component

Question

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.

Answer 1

i've been a bit silly. i changed the home page's @page tag from @page "/" to @page "/home" when i was trying to get some navlinking to work which i was struggling with.

changed it back and it works. There's a few hours wasted :)