如何在Blazor Server中指定重连提示的跳转URL？

当然可以自定义重连提示按钮的跳转URL，下面是几种实用的实现方式：

方法一：替换默认重连组件（最灵活） #

Blazor Server内置的ReconnectDisplay组件可以被完全替换，你可以自己写一个组件来控制跳转逻辑：

1. 创建自定义重连组件（比如CustomReconnectDisplay.razor）：

@inject NavigationManager NavManager

<div class="blazor-error-ui">
    <p>连接已断开，无法自动重连</p>
    <button @onclick="NavigateToCustomUrl">前往指定页面重试</button>
</div>

@code {
    [Parameter]
    public string TargetUrl { get; set; } = "/retry-page";

    private void NavigateToCustomUrl()
    {
        NavManager.NavigateTo(TargetUrl, forceLoad: true);
    }
}

2. 在_Host.cshtml中替换默认组件：
   找到原有的<component type="typeof(ReconnectDisplay)" render-mode="Static" />，替换成你的自定义组件，还可以传入指定的跳转地址：

<component type="typeof(CustomReconnectDisplay)" render-mode="Static" param-TargetUrl="/dashboard" />

方法二：用JavaScript修改默认行为（快速修改） #

如果不想替换组件，直接通过JS拦截默认按钮的点击事件，修改跳转地址：

在_Host.cshtml的<script>标签中添加以下代码：

document.addEventListener('click', (event) => {
    // 匹配默认重连提示里的链接和按钮
    const target = event.target;
    if (target.classList.contains('reconnect') || target.closest('.blazor-error-ui a')) {
        event.preventDefault();
        // 替换成你需要的跳转URL
        window.location.href = "/your-custom-path";
    }
});

方法三：配合服务端重连配置 #

可以在Program.cs中调整重连的超时和尝试次数，让自定义跳转更贴合业务逻辑：

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        // 设置客户端超时时间
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(20);
        // 设置握手超时时间
        options.HandshakeTimeout = TimeSpan.FromSeconds(10);
    });

注意事项 #

• 自定义组件方式可以完全控制提示的UI样式和跳转逻辑，适合需要定制化界面的场景
• JS方式适合快速修改默认提示的跳转行为，无需改动组件结构
• 跳转URL可以动态生成，比如在自定义组件中通过NavigationManager获取当前页面路径，实现带参数的跳转

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