Blazor WebAssembly NavLink路由异常：根路径跳转EventDisplay失败

我使用Visual Studio的Blazor WebAssembly基础模板开发项目，模板包含Home页面及MainLayout等结构。创建了名为EventDisplay的第二个页面，在Home组件中使用带有href="/eventdisplay"属性的NavLink，本应跳转到该空组件，但调试时从启动URL（localhost:2332/）点击NavLink会提示“该地址无内容”，路由无法找到目标组件。手动导航到localhost:2332/home后，页面显示正常，此时点击NavLink可完美跳转到新页面。

原因分析 #

• Home组件仅配置了@page "/home"路由，未配置根路径/的路由映射，导致启动时访问/无法加载Home组件，页面处于无匹配路由的状态，此时路由系统无法正确处理NavLink的跳转请求。
• 当手动访问/home时，Home组件正常加载，路由上下文初始化完成，NavLink的跳转逻辑能被正确执行。

修复方法 #

在Home组件的路由配置中添加根路径的映射，即在现有@page "/home"下方新增一行@page "/"，让启动URL/直接匹配到Home组件：

@inject HttpClient Http
@implements IDisposable
@inject SportIdState StateSportId
@page "/home"
@page "/"  <!-- 新增根路径路由 -->

@* 剩余组件内容保持不变 *@

相关代码 #

Home组件代码 #

@inject HttpClient Http
@implements IDisposable
@inject SportIdState StateSportId
@page "/home"
@page "/"

@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;
    }    
}

EventDisplay组件代码 #

@page "/eventdisplay"

<h3>EventDisplay</h3>

@code {
    // public int EventId { get; set; }    
    // public int CompetitionId { get; set; }
    // public int RaceId { get; set; }
}

内容的提问来源于stack exchange，提问作者pinman