如果 http GetById 返回 404，则导航到 NotFound 页面

Question

假设我有以下路由模式

• CustomerListComponent：包含客户列表
• CustomerDetailComponent：保存特定客户的详细信息

有路线

• @page“客户”

• @page "customer/{id:int}

和这样的路由器设置：

<Router AppAssembly="typeof(Startup).Assembly">
    <Found Context="routeData">
        ....
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

我希望页面重定向到 NotFound 页面，如果 http 调用没有找到具有传递给 URL 的 id 的客户

现在在我的组件中

protected override async Task OnInitializedAsync()
{
   var customer = await CustomerService.GetById(customerId);
   if (customer == null) 
   {
      // redirect to 404 NOTFOUND         
   }
}

现在看来，URL 中的任何有效整数都会打开 CustomerDetail 组件，当它尝试显示客户详细信息时，它会（显然）崩溃并显示 null reference

我是否遗漏了一些明显的东西？

编辑：我尝试加载自定义 404 页面并在我的 http 服务中处理导航，但这会导致浏览器上的 URL 发生变化。我想保留错误的 URL 并仍然导航到 404 页面。

Answer 1

您可以使用NavigationManager

@inject NavigationManager _nagigationManager;
...
@code {
    protected override async Task OnInitializedAsync()
    {
       var customer = await CustomerService.GetById(customerId);
       if (customer == null) 
       {
          _navigationManager.NavigateTo("404page");
       }
   }
}

如果你想留在同一个页面，但显示错误页面的内容，只需在你的 html 代码中添加组件：

@if(_notFound) 
{
    <NotFoundPage />
}
else
{
...
}
@code {
    private bool _notFound;
    protected override async Task OnInitializedAsync()
    {
       var customer = await CustomerService.GetById(customerId);
       if (customer == null) 
       {
          _notFound = true;
          StateHasChanged();
       }
   }
}