Blazor WASM使用浏览器前进后退按钮时触发应用完全刷新问题咨询

现象是否为预期行为？ #

这不是Blazor WASM的预期默认行为。正常配置的Blazor WASM应用应当通过客户端路由处理前进/后退操作，不会触发整页刷新、闪屏或状态丢失。

出现该问题通常是以下原因导致：

• 使用了普通<a>标签进行内部路由跳转，而非Blazor提供的NavLink组件或NavigationManager API
• 项目路由配置错误，比如根组件未正确设置Router核心组件
• 部署服务器未配置路由 fallback，导致浏览器后退/前进时请求了不存在的静态页面，触发整页刷新

如何配置为Blazor路由处理前进后退？ #

可通过以下步骤解决问题：

1. 使用Blazor官方导航方式 #

• 替换内部跳转的<a>标签为NavLink组件：

  <NavLink href="/counter" Match="NavLinkMatch.All">计数器</NavLink>
  

• 代码中导航时依赖注入NavigationManager并调用NavigateTo方法：

  @inject NavigationManager NavManager
  
  // 导航示例
  private void GoToAboutPage()
  {
      NavManager.NavigateTo("/about");
  }
  

2. 确保根组件路由配置正确 #

根组件（通常是App.razor）必须包含Router组件，示例标准配置：

<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>

3. 部署服务器配置路由Fallback（生产环境） #

• IIS：在web.config中添加重写规则，将所有非文件/目录请求转发到index.html：

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Blazor Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
  

• Nginx：在站点配置中添加fallback规则：

  location / {
      try_files $uri $uri/ /index.html;
  }
  

完成以上配置后，浏览器前进/后退操作将由Blazor客户端路由接管，不会触发整页刷新，应用状态也会得到保留。

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