Blazor WebAssembly 带路由参数场景下NavLink跳转异常咨询

异常根因 #

1. 绝对路径触发整页重载的原因 #

Blazor 中以/开头的 href 是相对于站点根目录，而非 Blazor 应用的部署根路径。你的应用部署在/MySite子路径下，<NavLink href="/PageA">解析后的目标地址是http://localhost/PageA，不在 Blazor 路由的接管范围内，因此浏览器会触发整页重载。

2. 相对路径拼接错误的原因 #

不以/开头的相对路径，默认是相对于当前浏览器URL的路径层级。当你处于/PageB/Item1层级时，相对路径PageA会被拼接为/PageB/PageA；而无路由参数时你处于/PageB层级，拼接后刚好是/MySite/PageA，所以看起来运行正常。 #

解决方案 #

• 优先使用~前缀表示应用根路径
  Blazor 原生支持~作为应用部署根的占位符，直接修改 NavLink 写法即可覆盖两类异常场景：

<NavLink href="~/PageA">PageA</NavLink>

~会自动替换为 index.html 中 base 标签配置的应用根路径，既不会触发站点根的绝对路径跳转，也不会按当前页面层级拼接相对路径。

• 确认 base 标签配置正确
  检查 wwwroot/index.html 的 head 节点下的 base 标签，部署在/MySite子路径时必须配置为<base href="/MySite/" />，末尾的斜杠不能省略，否则会导致全局路径解析逻辑异常。
• 统一路由跳转规范（可选）
  所有内部页面跳转优先使用 NavLink 组件而非原生 a 标签，路径统一使用~/xxx格式，避免硬写绝对/相对路径出现兼容问题。

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