如果路由匹配但参数错误，如何手动显示 Blazor-Webassembly-404-Not-Found 页面？答案

【问题标题】：How to manually display the Blazor-Webassembly-404-Not-Found page if a route matches but the parameters are wrong?如果路由匹配但参数错误，如何手动显示 Blazor-Webassembly-404-Not-Found 页面？
【发布时间】：2020-12-24 12:26:06
【问题描述】：

想象一下，这是通往我的 Blazor 页面的路径：@page "/a/b/c/{numericvalue:int}"

以下请求将匹配：

/a/b/c/1
/a/b/c/2
/a/b/c/509

这个请求...

/a/b/c/test

... 将显示 App.razor 文件中定义的 NotFound 页面：

<NotFound>
    <LayoutView Layout="@typeof(MainLayout)">
        <p>Sorry, there's nothing at this address.</p>
    </LayoutView>
</NotFound>

但现在我也想拒绝奇数。发现号码为奇数后，如何手动显示 NotFound 页面？我的代码如下所示：

@code{
    [Parameter]
    public int NumericValue {
        set => {
            if(value % 2 == 1)
                // show the 404 page
        }
    }
}

【问题讨论】：

标签： razor razor-pages blazor-webassembly

【解决方案1】：

出于好奇，我对此进行了研究，我的第一种方法是像在 MVC 中一样制作自定义 IRouteConstraint。但是，路由约束在 Blazor 中不起作用，查看源代码会发现 Router 组件有一个硬编码的页面路由约束列表。

但是，我想出了一个解决方法，如果您没有大量的这些自定义约束，那么我认为这是一个可行的解决方案。您所做的是在路由器的 Found 部分插入一些自定义逻辑，并根据您自己的条件流将呈现的输出重定向到 NotFound。

以下修改后的 App.razor 将确保偶数页面的 Number 路由参数始终为偶数，如果为奇数则显示 NotFound 内容：

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true" NotFound="NotFound">
    <Found Context="routeData">
        @{
            bool found = true;
            var route = routeData;

            if (routeData.PageType.IsEquivalentTo(typeof(Pages.Even)))
            {
                if (routeData.RouteValues.TryGetValue("number", out var numberValue))
                {
                    var number = Convert.ToInt32(numberValue);

                    if (number % 2 != 0)
                    {
                        found = false;
                    }
                }
            }
        }
        @if (found)
        {
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        }
        else
        {
            @NotFound
        }
    </Found>
</Router>
@code
{
    private RenderFragment NotFound => __builder =>
    {
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    };
}

【讨论】：