如何阻止SolidJS HashRouter劫持页面常规链接的行为？

当传统网页中的普通<a>标签被SolidJS HashRouter劫持时，可以通过以下两种方法禁用该特性：

方法一：通过HashRouter的shouldNavigate过滤外部链接 #

在SolidJS应用的入口代码中，给HashRouter添加shouldNavigate回调，判断点击的链接是否属于SolidJS应用范围，外部链接交由浏览器默认处理：

import { HashRouter, Routes, Route } from "@solidjs/router";

function App() {
  return (
    <HashRouter
      shouldNavigate={(event) => {
        // 获取触发点击的a标签
        const targetLink = event.target.closest('a');
        if (!targetLink) return true;

        // 判断链接是否在SolidJS应用容器之外
        const solidAppContainer = document.getElementById('solid-js-main');
        const isExternalLink = !solidAppContainer.contains(targetLink);

        // 外部链接返回false，阻止路由劫持
        if (isExternalLink) {
          return false;
        }

        // 内部路由正常处理
        return true;
      }}
    >
      <Routes>
        {/* 你的SolidJS路由配置 */}
        <Route path="/" element={<Home />} />
        <Route path="/solid-internal-page" element={<InternalPage />} />
      </Routes>
    </HashRouter>
  );
}

方法二：给外部链接添加自定义属性精准控制 #

给需要保持默认行为的外部链接加上data-no-router属性：

<a href="/page1" data-no-router>Page 1</a>
<a href="/page2" data-no-router>Page 2</a>
<div id="solid-js-main"></div>

然后在HashRouter的回调中识别该属性：

<HashRouter
  shouldNavigate={(event) => {
    const targetLink = event.target.closest('a');
    // 带有data-no-router属性的链接，阻止路由劫持
    if (targetLink?.hasAttribute('data-no-router')) {
      return false;
    }
    return true;
  }}
>
  {/* 路由配置 */}
</HashRouter>

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