如何从 Blazor 组件 (.razor) 导航到 .cshtml 页面？答案

【问题标题】：How to navigate from Blazor component (.razor) to .cshtml page?如何从 Blazor 组件 (.razor) 导航到 .cshtml 页面？
【发布时间】：2021-06-07 21:32:18
【问题描述】：

在服务器端 Blazor 中，如何从 Blazor 组件（.razor）重定向到 .cshtml 登录页面？

Login.cshtml（位于 ProjectRoot/Identity/Login 文件夹中）

    @page "/login"
            
    <p> I am login page </p>

Index.razor


    @page "/"
    @inject NavigationManager NavigationManager
    
    <AuthorizeView>
        <NotAuthorized>
            @if (true)
            {
                NavigationManager.NavigateTo("/login");
            }
        </NotAuthorized>
    </AuthorizeView>

目前，使用上面的代码，我得到一个异常：Microsoft.AspNetCore.Components.NavigationException。引用 .cshtml 页面的正确方法是什么？

【问题讨论】：

标签： blazor blazor-server-side

【解决方案1】：

您可以创建一个在初始化时触发 javascript 重定向的自定义组件。像这样的

[Parameter]
public string Path { get; set; }
[Inject] private IJSRuntime JSRuntime { get; set; }
protected override async Task OnInitializedAsync()
{
  await JSRuntime.InvokeVoidAsync("BlazorHelpers.RedirectTo", Path);
}

然后在你的页面中：

<AuthorizeView>
    <NotAuthorized>
        <RedirectTo Path="Something"></RedirectTo>
    </NotAuthorized>
</AuthorizeView>

你的 Js 会是这样的：

window.BlazorHelpers = {       
    RedirectTo: function (path) {
        window.location = path;
    }
};

【讨论】：