.NET 8 Blazor中NotFound场景下如何访问布局组件的级联参数？

问题原因 #

你遇到的NullReferenceException是因为**AnonymousLayout没有将自身作为级联值传递给子组件**。虽然你在404页面用@layout AnonymousLayout指定了布局，但Blazor不会自动把布局实例作为级联参数注入，必须在布局组件中显式通过<CascadingValue>将自身暴露给子页面。

而AuthenticatedLayout能正常工作，大概率是因为该布局组件中已经添加了<CascadingValue>来传递自身实例，AnonymousLayout则遗漏了这一步。

解决方案 #

步骤1：修改AnonymousLayout组件，添加级联值传递 #

打开AnonymousLayout.razor文件，用<CascadingValue>包裹整个布局内容（包括@Body），将布局自身作为级联值传递：

@inherits LayoutComponentBase

<!-- 用CascadingValue将当前布局实例传递给子组件 -->
<CascadingValue Value="this">
    <!-- 保留你原布局的HTML结构，比如导航栏、标题区等 -->
    <header>
        <h1>@_titleText</h1>
    </header>
    <main>
        @Body
    </main>
</CascadingValue>

@code {
    private string title;
    public string _titleText
    {
        get => title;
        set
        {
            if (title == value)
                return;
            title = value;
            InvokeAsync(() => StateHasChanged());
        }
    }
}

步骤2：确认404页面的级联参数定义正确 #

你的404页面代码中，级联参数的类型已经匹配AnonymousLayout，这部分无需修改：

@layout AnonymousLayout
@using App.Components.Layout
@page "/StatusCode/404"

<h3>Not Found</h3>
<p role="alert">Sorry, there's nothing at this address.</p>

@code {
    [CascadingParameter]
    public AnonymousLayout Layout { get; set; }

    protected override void OnInitialized()
    {
        Layout._titleText = "404 Error";
    }
}

额外优化建议 #

• 为避免极端情况下的null报错，可以在设置值前添加null检查：

  protected override void OnInitialized()
  {
      Layout?._titleText = "404 Error";
      // 或者
      if (Layout != null)
      {
          Layout._titleText = "404 Error";
      }
  }
  

• 建议将公共字段_titleText改为封装属性，符合C#编码规范：

  public string TitleText
  {
      get => title;
      set
      {
          if (title != value)
          {
              title = value;
              InvokeAsync(StateHasChanged);
          }
      }
  }
  

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