.NET 8 Blazor WebAssembly：布局组件传值至外部页面无响应问题

问题场景 #

基于.NET 8.0 Blazor Web应用，布局组件Layout.razor中引用了共享项目的Header组件（指定InteractiveWebAssembly渲染模式），Header内的输入框绑定了本地字符串message，点击按钮后无法导航到Myawesomeotherpage并传递参数。

问题原因 #

1. 路由不匹配：当message为空时，生成的路径/myawesomeotherpage/与页面定义的/myawesomeotherpage/{message}路由不匹配，导致导航无响应
2. 未处理特殊字符：输入内容包含空格、特殊字符时，直接拼接会导致路由解析失败
3. 可空注入的潜在风险：NavigationManager使用可空类型声明，虽用!断言，但未确保注入实例有效

修复方案 #

1. 修改Header.razor的Send方法，处理空值与URL编码 #

<header>
  <input @bind="message"/>
  <button @onclick="Send">Send message</button>
</header>
  
@code
{
  [Inject]
  private NavigationManager navigation { get; set; } = default!;

  private string? message { get; set; }

  public void Send()
  {
    // 处理空输入情况
    if (string.IsNullOrWhiteSpace(message))
    {
      navigation.NavigateTo("/");
      return;
    }
    // 对参数进行URL编码，避免特殊字符干扰路由
    var encodedMessage = Uri.EscapeDataString(message);
    navigation.NavigateTo($"/myawesomeotherpage/{encodedMessage}");
  }
}

2. （可选）修改Myawesomeotherpage.razor，支持可选参数 #

若允许无参数访问该页面，可修改路由为可选参数：

@page "/myawesomeotherpage/{message?}"

<h1>@(message ?? "No message provided")</h1>

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

3. 确认渲染模式配置 #

确保项目已启用InteractiveWebAssembly渲染模式，若不需要指定特定模式，可移除Header组件的@rendermode="InteractiveWebAssembly"属性，使用全局配置的渲染模式。

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