Blazor路由异常：参数传递为null及资源加载404问题求助

组件代码 #

@page "/einsatz"
@page "/einsatz/{ScaledTable}"

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

    private string Test { get; set; }
    private string Table { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Test = ScaledTable;   // ScaledTable 此处为NULL
    }

    protected override async Task OnParametersSetAsync()
    {
        Table = ScaledTable;  // ScaledTable 此处为NULL
    }
}

访问测试情况 #

• 访问 https://localhost:60711/einsatz
  => ScaledTable 为null，符合预期

• 访问 https://localhost:60711/einsatz/test
  => 出现大量资源加载404异常：

  Failed to load resource: the server responded with a status of 404 () all.css:1
  
  Failed to load resource: the server responded with a status of 404 () site.css:1
  
  Failed to load resource: the server responded with a status of 404 () blazor.server.js:1
  
  ... 等等
  
  Failed to load resource: the server responded with a status of 404 ()
  
  telerik-blazor.js:1

• 访问 https://localhost:60711/einsatz?scaledtable=test
  => ScaledTable 同样为NULL

修改路由指令后的异常 #

改用如下页面指令：

@page "/einsatz"
@page "/einsatz/{ScaledTable:string}"

应用启动时抛出异常：

System.NullReferenceException: Object reference not set to an instance of an object.

at Microsoft.AspNetCore.Components.Routing.Router.Refresh(Boolean isNavigationIntercepted)

at Microsoft.AspNetCore.Components.Routing.Router.SetParametersAsync(ParameterView parameters)

问题解析与解决方案 #

1. 资源加载404的原因 #

问题出在布局文件（如MainLayout.razor或_Host.cshtml）中资源引用的路径为相对路径。当访问多级路由/einsatz/test时，浏览器会将相对路径的资源请求错误解析为/einsatz/_framework/blazor.server.js这类带路由前缀的路径，导致404。

解决方法：

• 在项目根页面（如_Host.cshtml的<head>标签内）添加基准路径标签，确保所有相对路径请求以网站根目录为基准：

  <base href="/" />
  

• 所有资源引用使用绝对路径或~/前缀（ASP.NET Core会自动解析为根路径），例如：

  <script src="~/ _framework/blazor.server.js"></script>
  <link href="~/ css/site.css" rel="stylesheet" />
  

2. 查询字符串参数无法绑定的原因 #

[Parameter]特性仅用于绑定路由段参数（即URL中/{参数名}形式的部分），查询字符串参数（?参数名=值）需要通过[SupplyParameterFromQuery]特性来绑定。

修改组件代码：

@page "/einsatz"
@page "/einsatz/{ScaledTable}"

@code {
    [Parameter] 
    [SupplyParameterFromQuery(Name = "scaledtable")] // 可选指定查询字符串键名，不指定则匹配参数名大小写
    public string ScaledTable { get; set; } 

    // ... 其他代码不变
}

修改后，无论是访问/einsatz/test（路由段参数）还是/einsatz?scaledtable=test（查询字符串参数），ScaledTable都能正确获取到值。

3. 显式指定参数类型导致启动异常的原因 #

Blazor路由参数默认类型为string，无需显式添加:string后缀。显式指定类型会破坏路由解析逻辑，导致Router组件初始化时出现空引用异常，只需保留@page "/einsatz/{ScaledTable}"即可。

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