WPF Blazor Hybrid 中加入Route

微軟官方文件內有寫WPF如何結合Blazor使用 blazor hybrid，但後續沒有寫到如何加入Router，本篇將接續官方文件說明如何增加Router。

建立一個App.razor，內容如下，加入Router

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
    </NotFound>
</Router>

將RootComponent中的ComponentType改為App

<Grid>
    <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
        <blazor:BlazorWebView.RootComponents>
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type components:App}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>
</Grid>

建立一個Home.razor，按下按鈕後測試路由導向

@page "/"
@inject NavigationManager navigationManager

<button @onclick="NavigateToPage">Go to Counter</button>

@code {
    private void NavigateToPage()
    {
        navigationManager.NavigateTo("/Counter");
    }
}

App.razor就算是主要的頁面，都是由此頁面操作路由