Azure DevOps iframe 中的 Blazor 路由失败

Question

我有一个简单的 Blazor 网站 (source code)，在 Azure Devops 的 iframe 中运行时出现路由问题，但在其他地方没有。

应用程序在以下条件下运行时可以正常工作

• 使用“F5”在我的 PC 上使用 Visual Studio (VS2019) 在本地
• 使用 Visual Studio 的“发布”功能将项目发布到光盘后作为静态站点在本地进行
• 在本地作为另一个不相关网站的 iframe 中的静态网站
• 将发布的网站上传到主机后远程作为托管静态网站
• 远程作为另一个不相关站点的 iframe 中的静态站点（第二个静态站点模仿 AzureDevOps 板，使用不同的主机名）

但是，当我生成 Azure Devops widget 并将其上传到 Visual Studio Marketplace 时，Blazor 路由失败，因此站点无法正确加载，如此屏幕截图所示。

可以在here 找到该站点的源代码（只不过是默认 VS Blazor 模板的简化版本）。

观察

• 所有与 blazor 相关的资产（即 Blazor 和 mono javascript 文件以及各种 DLL 文件）都已成功提供给浏览器
• blazor DLL 运行成功（即 Programs.cs 成功启动 - Program.cs 和 StartUp.cs 中的 Console.WriteLine 语句证明了这一点）
• blazor 未能成功找到默认路由，因此<NotFoundContent>（在App.razor 中定义）标签显示在Azure Devops iframe 中

我尝试解决的问题

• 在wwwroot\index.html 中将base href 定义为“/”
• 在wwwroot\index.html 中将base href 定义为“/dist”
• 使用[Route] 属性在index.cs 文件中定义路由
• 在运行时使用 javascript 在 wwwroot\index.html 中动态定义 base href（这可满足 Microsoft 对 iframe 父 URL 的任何更改）

注意事项

• 所有Azure Devops widgets 在Azure Devops 内的iframe 中运行。
• 上传到 Visual Studio Marketplace can be found here 的 vsix 文件。

Answer 1

不出所料，修复最终与无效路由有关。

基本上需要使用NavigationManager 将用户重定向到 Blazor 页面本身，如下面的app.razor 示例所示，其中目标剃须刀页面包含

@page "/mypage"

@using Microsoft.AspNetCore.Components.Routing
@inject NavigationManager navigationManager
@{navigationManager.NavigateTo(@navigationManager.Uri.Replace("index.html", "") + "mypage");}

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Index)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

可以在分支feature/StackOverflowFixhere 中看到一个完整的示例，该分支现已发布到Visual Studio Marketplace。