在Azure DevOps iframe中Blazor路由失败

Question

我有一个简单的巴兹尔网站(源代码)，它在Azure Devops上运行iframe时存在路由问题，但在其他地方没有。

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

• 使用Visual (VS2019)在我的PC上本地使用“F5”
• 在使用Visual“发布”函数将项目发布到光盘后，本地作为静态站点
• 本地作为另一个无关站点的iframe中的静态站点。
• 将发布的站点上载到主机后，远程作为宿主静态站点。
• 远程作为另一个无关站点的iframe中的静态站点(这个第二个静态站点模仿AzureDevOps板，使用不同的主机名)

然而，当我生成一个Azure Devops小部件并将它上传到Visual市场时，Blazor路由失败了，因此站点无法按照这个屏幕截图正确地加载。

​

​

这里可以找到站点的源代码(除了默认版本的简化版本和Blazor模板)。

观察

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

我试图解决这个问题的东西

• 将base href定义为wwwroot\index.html中的"/“
• 将base href定义为wwwroot\index.html中的"/dist“
• 使用index.cs属性在[Route]文件中定义路由
• 使用javascript在运行时动态定义base href中的wwwroot\index.html (这适用于微软对wwwroot\index.html父URL的任何更改)

备注

• 所有Azure Devops小部件都在Azure Devops中的iframe中运行。
• 上传到可以在这里找到的v6文件。

Answer 1

这个修复最终与无效的路由有关，这是不足为奇的。

本质上，需要使用NavigationManager将用户重定向到razor页面本身，如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/StackOverflowFix 这里中看到，它现在已经发布到Visual市场了。