Blazor WebAssembly带URL参数路由出现404错误求助

问题场景 #

在Razor页面配置了带参数的路由：

@page "/VehicleBody-CategorizedData"
@page "/VehicleBody-CategorizedData/{PageNumber:int}"

index.html中引入Blazor脚本：

<script src="/_framework/blazor.webassembly.js"></script>

项目配置为.NET 7 Blazor WebAssembly：

<PropertyGroup>
  <TargetFramework>net7.0</TargetFramework>
  <Nullable>enable</Nullable>
  <ImplicitUsings>enable</ImplicitUsings>
  <UseBlazorWebAssembly>true</UseBlazorWebAssembly>
  <ValidateExecutableReferencesMatchSelfContained>false</ValidateExecutableReferencesMatchSelfContained>
</PropertyGroup>
<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.1" />
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.1" PrivateAssets="all" />
</ItemGroup>

当访问带PageNumber参数的路由（如/VehicleBody-CategorizedData/1）时，出现「Failed to load resource: the server responded with a status of 404 ()」错误。

解决方案 #

1. 配置服务器回退路由（核心解决方法） #

Blazor WebAssembly是单页应用，直接访问带参数的URL时，服务器会尝试寻找对应的物理文件，导致404。需要配置服务器将所有非文件/目录的请求回退到index.html。

开发环境（WebAssembly Dev Server）

在项目根目录创建web.config文件，添加以下内容：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <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>
</configuration>

生产环境部署

• IIS：确保安装URL重写模块，使用上述web.config配置即可。
• Apache：在.htaccess中添加：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L,QSA]

• Nginx：在站点配置中添加：

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

2. 确认路由参数接收逻辑 #

检查Razor页面是否正确绑定参数，确保参数名称与路由定义完全一致（大小写敏感）：

@code {
    [Parameter]
    public int? PageNumber { get; set; } = 1; // 设置默认值，避免无参数时的异常
}

3. 验证Blazor脚本路径 #

如果应用部署在子目录下，需调整脚本路径为相对路径，避免绝对路径导致的资源加载错误：

<script src="./_framework/blazor.webassembly.js"></script>

验证步骤 #

重启开发服务器后，访问/VehicleBody-CategorizedData/1，检查控制台是否消除404错误，同时确认页面正常加载并正确获取PageNumber参数。

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