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

Question

在服务器端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页面的正确方式是什么?

Answer 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;
}
};

Answer 2

如果有人想知道如何从Razor组件.NavigateTo()一个Razor页面，将可选参数forceOverload设置为true应该是工作。所以它看起来像这样:

_navigationManager.NavigateTo("/your/uri", true)

你可以在源代码中读到forceOverload强制加载实际的Razor页面，而不仅仅是交互式的客户端Razor"组件页面"，至少从我的理解

Answer 3

有点晚了，但我建议只在<NotAuthorized>区域内呈现您的登录组件。然后，该组件可以注入NavigationManager，以便在成功登录时导航到您的主页。