如何在.NET 6 Blazor中使用.NET 7的NavigationLock组件？

由于.NET 6原生未提供.NET 7的NavigationLock组件，我们可以通过JS互操作模拟其核心功能，实现对浏览器返回键的监听与导航控制。

实现步骤 #

1. 创建JS工具脚本 #

在项目的wwwroot/js目录下新建navigationLock.js文件，写入以下代码：

export function registerBackListener(dotNetRef) {
    const handlePopState = async (event) => {
        // 调用Blazor组件中的处理方法
        const shouldBlock = await dotNetRef.invokeMethodAsync('OnBackNavigationAttempted');
        if (shouldBlock) {
            // 阻止默认返回行为
            history.pushState(null, null, window.location.href);
        }
    };

    window.addEventListener('popstate', handlePopState);
    // 返回清理函数，用于组件销毁时移除监听
    return () => window.removeEventListener('popstate', handlePopState);
}

2. 封装Blazor监听组件 #

新建BrowserBackListener.razor组件，代码如下：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

@code {
    private IJSObjectReference? _jsModule;
    private Action? _cleanupListener;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 导入JS模块
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./js/navigationLock.js");
            
            // 注册返回键监听
            var dotNetRef = DotNetObjectReference.Create(this);
            _cleanupListener = await _jsModule.InvokeAsync<Action>(
                "registerBackListener", dotNetRef);
        }
    }

    [JSInvokable]
    public async Task<bool> OnBackNavigationAttempted()
    {
        // 这里编写你的自定义逻辑，返回true表示阻止返回，false允许
        // 示例：弹出确认对话框
        return await JSRuntime.InvokeAsync<bool>(
            "confirm", "确定要离开当前页面吗？");
    }

    // 组件销毁时清理监听
    public async ValueTask DisposeAsync()
    {
        _cleanupListener?.Invoke();
        if (_jsModule != null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

3. 在页面/布局中使用组件 #

在需要监听返回键的页面或共享布局中引入该组件即可：

<BrowserBackListener />

关键说明 #

• 该方案通过监听浏览器的popstate事件实现对返回键的捕获，这也是.NET 7中NavigationLock组件的底层实现逻辑。
• OnBackNavigationAttempted方法可根据业务需求自定义逻辑，比如检查表单是否未提交、弹出确认提示等。

内容的提问来源于stack exchange，提问作者キムヨンイン