.NET 8 Blazor Web App：如何从MainLayout获取RouteData

在Blazor布局中直接通过级联参数获取RouteData会返回null，因为布局组件本身不会自动接收路由上下文数据，你可以通过以下几种方式解决：

方法一：通过NavigationManager解析URL参数 #

这种方法适用于所有Blazor运行模式（WebAssembly/Server/Hybrid），无需依赖页面传递参数：

1. 在布局组件中注入NavigationManager：

@inject NavigationManager NavManager

2. 在代码块中解析URL路径，提取目标参数：

private string? CustomerId { get; set; }
private string? ProjectId { get; set; }

protected override void OnInitialized()
{
    ParseRouteParams();
}

// 监听路由变化，确保参数实时更新
protected override void OnParametersSet()
{
    ParseRouteParams();
}

private void ParseRouteParams()
{
    var absoluteUri = NavManager.ToAbsoluteUri(NavManager.Uri);
    // 拆分路径段并过滤空字符串
    var pathSegments = absoluteUri.AbsolutePath.Split('/')
        .Where(segment => !string.IsNullOrWhiteSpace(segment))
        .ToList();

    // 匹配URL结构：/{customerid}/{projectid}/dashboard
    if (pathSegments.Count >= 3 && pathSegments[2].Equals("dashboard", StringComparison.OrdinalIgnoreCase))
    {
        CustomerId = pathSegments[0];
        ProjectId = pathSegments[1];
    }
    else
    {
        // 非目标路由时重置参数
        CustomerId = null;
        ProjectId = null;
    }
}

3. 之后即可在布局UI部分直接使用CustomerId和ProjectId。

方法二：通过页面传递RouteData级联参数 #

如果涉及的页面数量不多，可以让页面将自身的RouteData传递给布局：

1. 在目标页面组件中，用<CascadingValue>包裹@Body，传递当前的RouteData：

@layout MainLayout
@attribute [Route("/{customerid}/{projectid}/dashboard")]

<CascadingValue Value="@RouteData">
    @Body
</CascadingValue>

2. 在布局组件中接收这个级联参数：

@inherits LayoutComponentBase

<CascadingParameter>
    private RouteData? RouteData { get; set; }
</CascadingParameter>

<!-- 布局UI内容 -->
@if (RouteData != null)
{
    var customerId = RouteData.Values["customerid"]?.ToString();
    var projectId = RouteData.Values["projectid"]?.ToString();
    <div class="layout-header">
        当前客户：@customerId | 当前项目：@projectId
    </div>
}

@Body

方法三：使用IHttpContextAccessor（仅Blazor Server/Hybrid Server模式） #

若你使用的是Blazor Server或Hybrid的Server渲染模式，可以通过IHttpContextAccessor直接从HttpContext获取路由数据：

1. 先在Program.cs中注册服务：

builder.Services.AddHttpContextAccessor();

2. 在布局组件中注入IHttpContextAccessor并提取参数：

@inject IHttpContextAccessor HttpContextAccessor

@code {
    private string? CustomerId { get; set; }
    private string? ProjectId { get; set; }

    protected override void OnInitialized()
    {
        var routeValues = HttpContextAccessor.HttpContext?.Request.RouteValues;
        if (routeValues != null)
        {
            CustomerId = routeValues["customerid"]?.ToString();
            ProjectId = routeValues["projectid"]?.ToString();
        }
    }
}

内容的提问来源于stack exchange，提问作者M. Keith Warren