为什么Blazor SPA中存在路由消息模棱两可的情况？

问题描述

2020年8月25日我正在研究一本书中的一个电子商务示例，而ASP.Net 3.1 Web App的大多数都在MVC中。有些简单的页面使用了剃刀页面。最后在管理中，我们使用Blazor。在Startup.Configure（）中设置路由时，我们有：

           // MVC default endpoint
            endpoints.MapDefaultControllerRoute();
            // RazorPages endpoints
            endpoints.MapRazorPages();
            // Blazor endpoints
            endpoints.MapBlazorHub();
            //   Map requests to SPA (Blazor)
            endpoints.MapFallbackToPage("/admin/{*catchall}","/Admin/Index");

因此，我认为“ / admin / {* catchall}将捕获以下URL（当然不包括基本URL）。

/ admin
/ admin / orders
/ admin /产品

由于Razor Pages用于托管Blazor应用程序，因此当您转到/ admin时，回退实际上会定向到具有以下主机文件的/Pages/Admin/Index.cshtml：

<!DOCTYPE html>
<html>
<head>
    <title>SportsStore Admin</title>
    <link href="/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <base href="/" />
</head>
<body>
    <component type="typeof(Routed)" render-mode="Server" />
    <script src="/_framework/blazor.server.js"></script>
</body>
</html>

加载路由组件：

<Router AppAssembly="typeof(Startup).Assembly">
    <Found>
        <RouteView RouteData="@context" DefaultLayout="typeof(AdminLayout)" />
    </Found>
    <NotFound>
        <h4 class="bg-danger text-white text-center p-2">
            No Matching Route
        </h4>
    </NotFound>
</Router>

这将加载AdminLayout组件：

@inherits LayoutComponentBase

<div class="bg-info text-white p-2">
    <span class="navbar ml-2">SPORTS STORE Administration</span>
</div>
<div class="container-fluid">
    <div class="row p-2">
        <div class="col-3">
            <NavLink class="btn btn-outline-primary btn-block"
                     href="/admin/products"
                     ActiveClass="btn-primary text-white"
                     Match="NavLinkMatch.Prefix">
                Products
            </NavLink>
            <NavLink class="btn btn-outline-primary btn-block"
                     href="/admin/orders"
                     ActiveClass="btn-primary text-white"
                     Match="NavLinkMatch.Prefix">
                Orders
            </NavLink>
        </div>
        <div class="col">
            @Body
        </div>
    </div>
</div>

您可以在AdminLayout中看到两个正常工作的NavLink。这是它们链接到的两个文件的顶部。

a）/Pages//admin/orders.razor：

@page "/admin/orders"
@inherits OwningComponentBase<IOrderRepository>

b）/Pages/admin/products.razor

@page "/admin/products"
@page "/admin"

这是此时所有路线的样子：

/ admin：直接在其中输入URL

即使我在那儿，您也可以在“产品”按钮上看到没有活动状态，因为它是在布局中的NavLink taghelper上指定的，必须单击该按钮才能应用ActiveClass。但是找到了路线。

现在，如果我单击产品，它将呈现以下内容：

因此/ admin和/ admin / products都能使我到达那里。通过单击NavLink按钮，活动状态将应用于“产品NavLink”按钮。

由于“产品”组件中指定了两条路线，因此这两个URL使我到达那里：

@page "/admin/products"
@page "/admin"

如果我单击“订单” NavLinkButton：

通过单击“订单导航链接”按钮并在订单组件顶部匹配此路线来应用订单ActiveState：

@page "/admin/orders"

但是现在当我手动输入 / admin /产品要么 / admin / orders

我收到模棱两可的路由错误消息：

并针对/ admin /订购相同的商品。

如果我在Products.razor中注释掉/ admin路由，则会从Routed.razor文件中获得NoRouteFound响应：

@page "/admin/products"
@*@page "/admin"*@

所以路由一直让我感到困惑。我认为发生的事情是在启动时全部抓住了

//   Map requests to SPA (Blazor)
            endpoints.MapFallbackToPage("/admin/{*catchall}","/Admin/Index");

作为SPA应用程序的主机转到Index.cshtml Razor页面，并初始化Blazor应用程序。从这里开始，到服务器的HTTP持久连接（与Angular的连接有些不同），现在由Blazor应用程序处理路由，直到用户单击或手动输入在StartUp中Blazor端点之前注册的端点。因此，这在SPA中是典型的，还是有办法使手动URL条目起作用。在阅读本章的内容时，可能会清除该问题，但是我对所有技术的布线始终感到困惑。

2020年8月26日-更新

现在，当使用产品或订单组件时，每次进行更改（甚至是小的HTML更改）时，浏览器都会显示“正在重新加载”，并且当我单击重新加载或刷新时，我又得到了模棱两可的路由器信息，因此每次进行小的更改后，我都必须清理并重建以在浏览器中查看渲染。这很烦人。还有其他人有这个问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

asp.net-core-3.1 asp.net-mvc-routing blazor-server-side