如何在WPF Blazor Hybrid应用中实现页面导航

我跟着教程创建了一个WPF Blazor Hybrid应用，应用运行正常，启动页为/Pages/Overview.razor。尝试通过NavigationManager导航到/Pages/Details.razor页面，但点击按钮完全没有反应。

现有代码 #

Overview.razor #

@inject NavigationManager navManager

<h3>Overview</h3>

<button @onclick="NavigateToDetails">点击跳转</button>

Overview.razor.cs #

namespace Accounting.Pages
{
    public partial class Overview
    {
        private void NavigateToDetails()
        {
            navManager.NavigateTo("/Details");
        }
    }
}

注：也尝试过使用/Pages/Details作为导航路径。

解决方法 #

1. 检查页面路由定义
   确认Details.razor顶部添加了正确的路由指令，导航路径要和指令完全匹配：

   • 如果用navManager.NavigateTo("/Details")，则Details.razor需添加：@page "/Details"
   • 如果用navManager.NavigateTo("/Pages/Details")，则Details.razor需添加：@page "/Pages/Details"

2. 验证Router组件配置
   打开App.razor，确保Router组件包含页面所在程序集，且路由逻辑正常：

   <Router AppAssembly="@typeof(App).Assembly" 
           AdditionalAssemblies="new[] { typeof(Overview).Assembly }">
       <Found Context="routeData">
           <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
       </Found>
       <NotFound>
           <LayoutView Layout="@typeof(MainLayout)">
               <p>找不到指定页面</p>
           </LayoutView>
       </NotFound>
   </Router>
   

3. 确认BlazorWebView基础配置
   检查WPF项目中承载Blazor的BlazorWebView控件，确保其HostPage指向的index.html里包含正确的base标签：

   <base href="/" />
   

   该标签会影响路由路径的解析逻辑。

4. 调试导航方法
   在NavigateToDetails方法中添加断点，确认方法是否被触发，同时检查navManager是否成功注入（不为null）。如果方法未触发，检查按钮的@onclick绑定是否拼写正确。

5. 尝试强制重载导航
   若存在路由缓存问题，可在导航时添加强制重载参数：

   navManager.NavigateTo("/Details", forceLoad: true);
   

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