使用hx-boost时相对URL导航出现404问题求助

问题根源 #

你的问题出在HTMX的hx-boost对相对URL的解析逻辑上：当页面通过AJAX加载（包括重定向场景）时，HTMX会基于最后一次AJAX请求的原始URL（而非浏览器地址栏显示的URL）来解析相对链接，这就导致了路径拼接错误：

• 第一个场景中，你访问/admin/[id]被重定向到/admin/[id]/scores，但HTMX内部仍以/admin/[id]作为基准URL，点击answers相对链接时就会解析为/answers而非/admin/[id]/answers。
• 反向场景中，从/admin/[id]/answers跳回/admin（绝对路径）后，HTMX没有更新基准URL，仍沿用之前的/admin/[id]/answers，点击admin/[id]相对链接时就会拼接成/admin/[id]/admin/[id]。

解决方案 #

1. 统一使用绝对路径链接 #

把所有导航链接改成绝对路径格式，比如：

• 横向导航到answers的链接写成 /admin/[id]/answers，而非 answers
• 从/admin跳转至详情页的链接写成 /admin/[id]，而非 admin/[id]

绝对路径不受HTMX基准URL的影响，能确保请求地址正确。

2. 局部设置hx-boost而非全局 #

移除body上的hx-boost="true"，仅在需要AJAX增强的单独链接上添加hx-boost="true"属性。这样每个链接的基准URL会基于浏览器当前地址栏，避免全局增强导致的基准URL混乱。

3. 强制HTMX更新基准URL #

在重定向后的页面（比如/admin/[id]/scores和/admin/[id]/answers）中，添加hx-push-url="true"属性（可以放在body或容器标签上），确保HTMX将浏览器地址栏的URL同步为内部基准URL。

补充说明 #

HTMX的文档中确实提到过，相对URL的解析依赖于当前上下文的URL，而全局hx-boost会让所有链接的AJAX请求共享同一个上下文，当存在重定向或跨层级导航时，就容易出现基准URL不匹配的问题。

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