azure-devops - Blazor 路由在 Azure DevOps iframe 中失败

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

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

在我的 PC 上使用 Visual Studio (VS2019) 使用“F5”

在使用 Visual Studio 的“发布”功能将项目发布到光盘后，在本地作为静态站点

在本地作为另一个不相关站点的 iframe 中的静态站点

在将发布的站点上传到主机

后远程作为托管静态站点

远程作为另一个不相关站点的 iframe 中的静态站点(第二个静态站点模仿 AzureDevOps 板，使用不同的主机名)

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

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

观察

所有与 blazor 相关的 Assets (即 Blazor 和 mono javascript 文件以及各种 DLL 文件)都成功提供给浏览器

blazor DLL 成功运行(即 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(这迎合了 Microsoft 对 iframe 父 URL 的任何更改)

笔记

所有 Azure Devops widgets 都在 Azure Devops 内的 iframe 内运行。

上传到 Visual Studio Marketplace 的 vsix 文件 can be found here 。

最佳答案

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

本质上，需要使用 NavigationManager 将用户重定向到 Blazor 页面本身，如下面 app.razor 中的示例，其中目标 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 here 中看到，它现在已经发布到 Visual Studio Marketplace 。

关于azure-devops - Blazor 路由在 Azure DevOps iframe 中失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57210058/