如何区分页面中react-router-dom的Link标签与普通a标签？

我需要在应用里区分普通 <a> 标签和 react-router-dom 的 <Link> 标签，注意到 <Link> 会绑定一个 noop 空点击监听器，但不确定这是不是靠谱的区分依据。假设某个客户端站点用了 react-router-dom，示例代码如下，得判断哪个是 Link 标签、哪个是普通 a 标签：

function noop() {}

function App(props) {
  return (
    <>
      <Link to="about">React Link tag 1</Link>
      <br>
      <a href="about">Normal anchor 6</a>
      <Routes>
        <Route path="about" element={ <About/> } />
      </Routes>
    </>
  );
}

用 noop 监听器区分靠谱吗？ #

答案是不太可靠：

• react-router-dom 版本迭代时可能会修改内部实现，比如后续版本说不定就移除这个空监听器了；
• 普通 a 标签也可能被业务代码或第三方库绑上空点击监听器，很容易出现误判。

更靠谱的区分方法 #

推荐这几种稳定的方式：

• 检查自定义属性：react-router-dom 渲染的 Link 最终会带有特定自定义属性，比如 data-rr-ui-link（不同版本可能略有差异，但这类标识一般会保留），直接检查属性即可：

  function isReactRouterLink(element) {
    return element.hasAttribute('data-rr-ui-link') || element.hasAttribute('data-react-router-link');
  }
  

• 检查类名：很多场景下，Link 渲染的 DOM 元素会带有 router-link 这类相关类名，通过类名判断也很直接：

  function isReactRouterLink(element) {
    return element.classList.contains('router-link');
  }
  

• React 实例判断（仅限应用内部）：如果你的代码在 React 应用里运行，可以直接拿组件实例检查类型是不是 Link：

  import { Link } from 'react-router-dom';
  import ReactDOM from 'react-dom';
  
  function isLinkComponent(componentInstance) {
    return componentInstance.type === Link;
  }
  
  // 用法示例：比如有组件的 ref
  const linkRef = useRef(null);
  if (linkRef.current) {
    console.log(isLinkComponent(linkRef.current));
  }
  

• 观察点击行为：Link 点击会阻止默认跳转（不会刷新页面，走客户端路由），普通 a 标签点击会触发页面刷新或跳转，但这种方式相对麻烦，不如前面几种直接。

示例代码里的判断结果 #

• <Link to="about">React Link tag 1</Link> 是 react-router-dom 的 Link 标签，渲染后的 DOM 带有 React Router 相关标识，点击不刷新页面；
• <a href="about">Normal anchor 6</a> 是普通 a 标签，点击会触发页面跳转/刷新，没有 React Router 相关标识。

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