Blazor UriHelper.NavigateTo两次调用页面 [英] Blazor UriHelper.NavigateTo is calling the page twice

问题描述

我在Preview 8中创建了一个新的Blazor服务器端应用程序.当我调用UriHelper.NavigateTo从Index.razor页面转到计数器页面时，该计数器页面被调用了两次.

I created a new Blazor Server Side Application in Preview 8. When I call the UriHelper.NavigateTo to go to the counter page from the Index.razor page, the counter page is called twice.

在Index.razor页面中，我有以下代码:

In the Index.razor page I have this code:

@code{

    protected async override Task OnInitializedAsync()
    {
        UriHelper.NavigateTo("/counter");
    }

}

然后在计数器页面中，我添加了以下代码并带有断点:

Then in the counter page I added the following code with a breakpoint in it:

protected override void OnInitialized()
{

}

我的期望是，当NavigateTo调用Index.razor中的计数器路由时，仅调用一次计数器页面

My expectation is to call the counter page only one time when the NavigateTo calls the counter route in the Index.razor

推荐答案

由于dani herrera的评论而更新:

Update due to a comment by dani herrera:

生命周期方法OnInitializedAsync被调用两次，但是计数器@page组件仅被调用一次. 此行为是设计使然.第一次执行OnInitializedAsync是在服务器端Blazor应用正在预呈现时，在此期间JSInterop不可用，因此调用UriHelper.NavigateTo("/counter");会触发错误.以下代码段描述了Blazor当前如何处理此类情况:

The life cycle method OnInitializedAsync is called twice, but the counter @page component is called once only. This behavior is by design. The first time OnInitializedAsync is executed is when server-side Blazor app is being pre-rendering, during which time, JSInterop is not available, and thus calling UriHelper.NavigateTo("/counter"); triggers an error. The following code snippet describe how Blazor currently treats such cases:

protected override void NavigateToCore(string uri, bool forceLoad)
        {
            Log.RequestingNavigation(_logger, uri, forceLoad);

            if (_jsRuntime == null)
            {
                var absoluteUriString = ToAbsoluteUri(uri).ToString();
                throw new NavigationException(absoluteUriString);
            }

            _jsRuntime.InvokeAsync<object>(Interop.NavigateTo, uri, forceLoad);
        }

在此处查看更多.如您所知，没有调用counter @page组件，并且引发了异常.

See more here. As you may realize, the counter @page component is not called, and an exception is raised.

预渲染完成后，客户端SignalR建立与服务器的连接，然后渲染您的应用程序.这次(第二次调用OnInitializedAsync方法)UriHelper.NavigateTo("/counter");已正确执行，并且我们很高兴地导航到了计数器页面(第一次)

After pre-rendering has completed, client-side SignalR establishes a connection to the server, and your app is rendered. This time (second time the method OnInitializedAsync is called) UriHelper.NavigateTo("/counter"); is properly executed, and we are happily navigated to the counter page (first time)

您可以使用OnAfterRender方法作为解决方法，并且应该验证SignalR是否已建立与服务器的连接；否则，请执行以下步骤.即预渲染过程已经完成.

You may use the method OnAfterRender as a workaround, and you should verify whether a connection with the server has already been established by SignalR; that is the pre-rendering process has completed.

@page "/"
@using Microsoft.JSInterop
@inject IComponentContext ComponentContext
@inject IJSRuntime jsRuntime

<p>Navigate to the counter component.</p>

@code{

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!ComponentContext.IsConnected) return;

         UriHelper.NavigateTo("/counter");
    }
}

希望这对您有帮助...

Hope this helps...

这篇关于Blazor UriHelper.NavigateTo两次调用页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！