Blazor如何在初始化时重定向用户且不渲染原组件？

从浏览器URL打开任意路由时，组件会直接加载/初始化，希望根据API响应决定用户最终访问的页面。但当前代码在地址栏粘贴路由直接访问时不生效——首次加载时注册的LocationChangingHandler不会被调用。

预期效果：API请求完成前绝不加载任何组件；若API要求重定向，则跳转至对应页面。

用户当前使用的App.Razor代码：

public override async Task SetParametersAsync(ParameterView parameters)
{
    parameters.SetParameterProperties(this);
    if (!_initialized)
    {
        registration = navigationManager.RegisterLocationChangingHandler(async (context) => OnLocationChanging(navigationManager, context)); //does not get called in first load
        _initialized = true;
    }

    await base.SetParametersAsync(ParameterView.Empty);
}

private static async ValueTask OnLocationChanging(NavigationManager navigationManager, LocationChangingContext context = null)
{
    //call incase full page refresh

    var location = context?.TargetLocation ?? navigationManager.Uri;
    string path = location.Replace(navigationManager.BaseUri, "/");

    if (!RouteChecker.IsValidRoute(location, out path))
    {
        context?.PreventNavigation();
        navigationManager.NavigateTo(path);
    }

}

核心思路 #

1. 把首次加载的路由校验逻辑移到OnInitializedAsync中，因为SetParametersAsync里注册的Handler无法拦截首次页面加载的导航事件
2. 用加载状态变量控制组件渲染，确保API请求完成前不渲染业务组件
3. 复用路由校验逻辑，同时处理首次加载和后续导航场景

修改后的App.Razor代码示例 #

@inject NavigationManager NavigationManager
@implements IAsyncDisposable

@{
    if (_isLoading)
    {
        // API请求完成前只显示加载提示，不渲染任何业务组件
        <p>加载中...</p>
        return;
    }
}

<!-- 你的正常路由渲染区域 -->
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>抱歉，未找到该页面！</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private IDisposable? _navigationRegistration;
    private bool _isLoading = true;
    private bool _initialized = false;

    protected override async Task OnInitializedAsync()
    {
        // 首次加载时直接执行路由校验
        await ValidateAndRedirectRoute(null);
        
        // 注册后续导航的拦截Handler
        _navigationRegistration = NavigationManager.RegisterLocationChangingHandler(async context => 
            await ValidateAndRedirectRoute(context));
            
        _initialized = true;
    }

    private async ValueTask ValidateAndRedirectRoute(LocationChangingContext? context)
    {
        var targetLocation = context?.TargetLocation ?? NavigationManager.Uri;
        string path = targetLocation.Replace(NavigationManager.BaseUri, "/");

        // 调用API或路由校验逻辑（这里保留你的RouteChecker逻辑）
        if (!RouteChecker.IsValidRoute(targetLocation, out path))
        {
            context?.PreventNavigation();
            NavigationManager.NavigateTo(path);
        }

        // 标记加载完成，渲染业务组件
        _isLoading = false;
        StateHasChanged();
    }

    public ValueTask DisposeAsync()
    {
        _navigationRegistration?.Dispose();
        return ValueTask.CompletedTask;
    }
}

关键要点说明 #

• 加载状态控制：通过_isLoading变量，在API/路由校验完成前只显示加载内容，完全阻止业务组件的初始化
• 首次加载处理：在OnInitializedAsync中直接调用校验逻辑，不需要依赖LocationChangingHandler
• 逻辑复用：将路由校验和重定向逻辑封装到ValidateAndRedirectRoute方法，同时支持首次加载和后续导航场景
• 资源清理：实现IAsyncDisposable接口，在组件销毁时释放导航注册，避免内存泄漏

内容的提问来源于stack exchange，提问作者vaira