Blazor WebAssembly实现www.mydomain.com/{username}形式路由咨询

1. 客户端路由配置 #

Blazor WebAssembly的路由由客户端处理，无需修改控制器，直接在页面组件上定义路由模板即可。

创建一个Profile.razor页面用于展示用户信息：

@page "/{username}"
@inject HttpClient Http

<h1>@Username的个人页面</h1>
<!-- 这里可以添加用户信息展示的UI -->

@code {
    [Parameter]
    public string? Username { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (!string.IsNullOrEmpty(Username))
        {
            // 调用后端API获取对应用户数据，示例：
            // var userProfile = await Http.GetFromJsonAsync<UserProfile>($"api/profiles/{Username}");
            // 后续处理数据渲染逻辑
        }
    }
}

2. 路由优先级处理 #

如果你的应用存在根路由（比如首页/），要确保固定路由的优先级高于/{username}，避免首页被覆盖。Blazor会优先匹配更具体的路由，所以保留Index.razor的@page "/"即可，若有冲突，可将固定路由组件放在项目编译顺序的前面。

3. 服务器端Fallback配置（关键步骤） #

直接访问www.mydomain.com/john这类路由时，服务器会尝试查找对应物理文件，找不到会返回404。必须配置服务器将所有非文件/目录的请求转发到Blazor的index.html，由客户端路由接管处理。

ASP.NET Core托管场景 #

在Program.cs中添加Fallback路由配置：

var builder = WebApplication.CreateBuilder(args);

// 注册服务（比如HttpClient、Blazor组件等）...

var app = builder.Build();

// 配置中间件（HTTPS重定向、静态文件等）...

app.MapBlazorHub();
app.MapFallbackToFile("index.html"); // 核心：所有未匹配的请求都返回index.html

app.Run();

IIS部署场景 #

在站点根目录创建web.config，配置URL重写规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Blazor Route Fallback" 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>

4. 避免路由冲突 #

如果应用有其他固定路由（比如/login、/admin），这些路由会比/{username}更具体，Blazor会优先匹配它们，无需额外配置。例如Login.razor的@page "/login"会直接匹配/login请求，不会被当成用户名路由处理。

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