Blazor多参数路由锚点导航报错：无法解析Int32类型参数

问题现象 #

点击包含路由参数和锚点的链接后，页面虽能正常滚动到目标锚点，但抛出未处理异常：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Cannot parse the value '7900#headerC' as type 'System.Int32' for 'Wid'. System.InvalidOperationException: Cannot parse the value '7900#headerC' as type 'System.Int32' for 'Wid'.

问题根源：Blazor路由错误将锚点ID（#headerC）与路由参数（7900）合并为同一个参数值，导致无法将包含#的字符串转换为int类型的Wid参数。

解决方案 #

1. 正确构造导航链接 #

必须确保锚点部分与路由参数分离，避免拼接在参数后：

• 错误示例：路由会把/Page/7900#headerC中的7900#headerC当作完整的Wid参数
• 正确实现：

使用NavLink组件

<NavLink href="/YourPage/7900#headerC">跳转到锚点C</NavLink>

动态参数场景：

<NavLink href="@($"/YourPage/{Wid}#{AnchorId}")">跳转到指定锚点</NavLink>

使用NavigationManager代码导航

// 明确分离参数与锚点
_navigationManager.NavigateTo($"/YourPage/{wid}#{anchorId}");

2. 组件内手动解析参数（兼容遗留场景） #

若无法修改链接构造，可在目标组件中手动拆分参数与锚点：

[Parameter]
public string Wid { get; set; }

private int CurrentWid { get; set; }

protected override void OnParametersSet()
{
    if (!string.IsNullOrEmpty(Wid))
    {
        // 拆分锚点，提取纯参数值
        var paramPart = Wid.Split('#')[0];
        if (int.TryParse(paramPart, out int validId))
        {
            CurrentWid = validId;
        }
        else
        {
            // 处理参数无效的情况
        }
    }
}

3. 确保路由模板参数类型正确 #

在目标页面的路由模板中明确参数类型，帮助Blazor正确识别参数边界：

@page "/YourPage/{Wid:int}"

该模板指定Wid必须为int类型，当链接锚点与参数分离正确时，Blazor会自动忽略锚点部分，仅解析有效参数值。

验证 #

点击正确构造的链接后，浏览器地址栏应显示/YourPage/7900#headerC，此时路由会正确提取7900作为Wid参数，锚点单独处理，不会触发解析异常。

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