.NET 8 Blazor通配路由无法加载样式表与静态文件问题

1. 修复静态资源路径问题 #

使用catch-all路由时，相对路径的静态资源会被解析为当前路由的子路径，导致加载失败。直接改用绝对路径引用静态资源：

• 样式表：将 <link href="css/site.css" rel="stylesheet" /> 改为 <link href="/css/site.css" rel="stylesheet" />
• 图片/脚本：将 <img src="images/logo.png" /> 改为 <img src="/images/logo.png" />

所有静态资源路径以/开头，强制从网站根目录加载，不受当前路由层级影响。

2. 实现数据库驱动的路由匹配 #

不要直接在页面上用@page "/{**pageRoute}"，而是通过自定义路由解析服务+中间捕获页的方式实现：

步骤1：创建路由解析服务 #

定义服务接口和数据库实现，用于查询路由表并返回匹配的组件类型：

public interface IRouteResolver
{
    Task<Type?> GetMatchingComponentAsync(string route);
}

public class DatabaseRouteResolver : IRouteResolver
{
    private readonly AppDbContext _dbContext;

    public DatabaseRouteResolver(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public async Task<Type?> GetMatchingComponentAsync(string route)
    {
        // 查询数据库路由表（示例：假设表中有Path和ComponentFullName字段）
        var routeEntry = await _dbContext.Routes
            .FirstOrDefaultAsync(r => r.Path.Equals(route, StringComparison.OrdinalIgnoreCase));
        
        if (routeEntry == null) return null;
        
        // 通过组件全名反射获取Type（确保组件命名空间正确）
        return Type.GetType(routeEntry.ComponentFullName);
    }
}

步骤2：注册服务 #

在Program.cs中注入服务：

builder.Services.AddScoped<IRouteResolver, DatabaseRouteResolver>();
// 注册数据库上下文（根据你的实际配置调整）
builder.Services.AddDbContext<AppDbContext>(options => 
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

步骤3：创建捕获页并动态加载组件 #

创建CatchAll.razor作为所有路由的入口：

@page "/{**pageRoute}"
@inject IRouteResolver RouteResolver
@inject NavigationManager NavManager

@if (_targetComponent != null)
{
    <!-- 动态渲染匹配的组件 -->
    @(RenderFragment.Create(builder => {
        builder.OpenComponent(0, _targetComponent);
        builder.CloseComponent();
    }))
}
else
{
    <!-- 无匹配时渲染NotFound内容 -->
    <LayoutView Layout="@typeof(MainLayout)">
        <div class="text-center mt-5">
            <h3>页面不存在</h3>
            <p>无法找到与路径 "@pageRoute" 匹配的内容</p>
        </div>
    </LayoutView>
}

@code {
    [Parameter]
    public string? pageRoute { get; set; }

    private Type? _targetComponent;

    protected override async Task OnParametersSetAsync()
    {
        if (!string.IsNullOrWhiteSpace(pageRoute))
        {
            _targetComponent = await RouteResolver.GetMatchingComponentAsync(pageRoute);
        }
    }
}

3. 修复NavigationManager导航问题 #

调用NavigateTo时，确保使用根相对路径（以/开头），避免静态资源URL被错误路由：

// 正确写法：使用绝对根路径
NavigationManager.NavigateTo($"/{targetRoute}", forceLoad: false);

// 错误写法：相对路径会导致静态资源路径被篡改
// NavigationManager.NavigateTo(targetRoute);

4. 启用Router的NotFound RenderFragment #

之前NotFound不触发是因为catch-all路由捕获了所有路径，上面的方案中，当数据库无匹配路由时，捕获页会直接渲染NotFound内容。如果需要复用Router的NotFound片段，可修改捕获页：

@if (_targetComponent != null)
{
    @(RenderFragment.Create(builder => {
        builder.OpenComponent(0, _targetComponent);
        builder.CloseComponent();
    }))
}
else
{
    <NotFound />
}

然后在App.razor中保持Router的NotFound定义：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <div class="alert alert-danger">
                自定义NotFound页面：请求的路径不存在
            </div>
        </LayoutView>
    </NotFound>
</Router>

这样就能正常触发Router的NotFound内容了。

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