.NET 8升级Chris Sainty Blazor自定义路由遇404问题求助

1. 修复异步初始化与参数处理的时序问题 #

OnParametersSet可能在路由数据加载完成前触发，导致routes为null无法匹配路由。调整代码确保路由加载完成后再处理参数匹配：

@page "{*pageRoute:nonfile}"
@inject WebSiteService webSiteService
@inject NavigationManager navigationManager

@if (routes == null)
{
    <p>加载中...</p>
}
else
{
    <CascadingValue Value="pageRoute">
        @DynamicComponent
    </CascadingValue>
}

@code {
    [Parameter]
    public string pageRoute { get; set; }
    private RenderFragment DynamicComponent { get; set; }
    List<RouteVM> routes { get; set; }

    protected override async Task OnInitializedAsync()
    {
        routes = await webSiteService.getRoutes();
        // 路由加载完成后手动触发参数处理
        OnParametersSet();
    }

    protected override void OnParametersSet()
    {
        if (routes == null) return;

        // 处理根路径：pageRoute为空时匹配"/"，同时清理多余斜杠
        var cleanRoute = pageRoute?.Trim('/') ?? string.Empty;
        var targetPath = string.IsNullOrEmpty(cleanRoute) ? "/" : $"/{cleanRoute}";
        
        var route = routes.FirstOrDefault(c => c.page == targetPath);            

        // 确保组件类型存在，避免空引用
        var componentTypeName = route?.componentName ?? "NotFound";
        var componentType = Type.GetType($"MyApp.Components.Pages.{componentTypeName}") 
                            ?? Type.GetType("MyApp.Components.Pages.NotFound");

        DynamicComponent = builder =>
        {
            builder.OpenComponent(0, componentType);
            builder.CloseComponent();
        };                        
    }      
}

2. 检查Program.cs的交互式服务器配置 #

确保已正确启用交互式服务器组件与路由映射：

var builder = WebApplication.CreateBuilder(args);

// 添加Blazor交互式服务器组件
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// 注册自定义服务
builder.Services.AddScoped<WebSiteService>();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

// 映射Blazor组件并启用交互式服务器渲染模式
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

3. 验证App.razor的路由结构 #

.NET8的App.razor必须包含<Routes>组件以启用路由系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MyApp.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

4. 验证路由数据与组件命名空间 #

• 确认webSiteService.getRoutes()返回的RouteVM中page字段格式正确（如根路径为"/"，其他路径为"/about"）。
• 检查组件的完整命名空间是否与MyApp.Components.Pages.xxx完全匹配，Type.GetType需要完整的命名空间+类名才能正确定位组件。

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