如何防止 <a> 标签重定向用户，同时保留其 href 属性？答案

【问题标题】：How to prevent an <a> tag from redirecting user, while keeping its href attribute?如何防止 <a> 标签重定向用户，同时保留其 href 属性？
【发布时间】：2021-03-27 00:17:57
【问题描述】：

我正在做一个项目，我们使用<button> 元素作为链接，例如，我们打开用户想要的页面，不同之处在于我们不将用户重定向到页面，只是呈现它在div。

当我们在另一天讨论 SEO 策略时，有人提到这对我们在搜索引擎中的排名有多么不利，以及我们应该如何尝试使用默认的 <a> 元素。

我能够实现我想要的唯一方法是设置 href="#" - 这破坏了使链接可抓取的目的 - 然后在我的 <a> 的 onClick 处理程序上调用 event.preventDefault()。

我想这个问题可以用两种方式问：

如何防止 <a> 标记重定向用户，同时保持其 href 属性？

或

我怎样才能使我的链接可抓取，同时防止它们重定向用户，如果点击？

我已经试过了：

event.stopPropagation()
event.preventDefault()
返回假；

来自this thread：

event.stopPropagation()
event.nativeEvent.stopImmediatePropagation()

【问题讨论】：

a 标签用于导航，但您没有导航。使用button是对的，你的SEO不会被毁掉。
我一直在尝试遵循来自 Google developers.google.com/search/docs/advanced/guidelines/…的本指南
您的按钮不是链接，不应该是可抓取的。
就个人而言，我讨厌以 div 模式加载页面，我觉得它在不需要的地方增加了额外的复杂性。我希望您正在管理历史记录，以便您的用户仍然可以使用后退和前进按钮进行导航。您在 div 中加载的页面是带有 doctype、html、head 和 body 标签的完整页面，还是部分页面？如果完成分页，您是否只是解析出您需要的内容？

标签： html reactjs web-crawler anchor

【解决方案1】：

您可以使用 React Router 来渲染组件，它在库中包含一个 Link 您可以使用它来将重定向保留在您的应用程序中而无需刷新，因此您可以将替换为任何 .

【讨论】：

【解决方案2】：

这将保持您的 href 完整并防止页面在单击时重定向到那里：

import React from "react";
import "./styles.css";

export default function App() {
  const [content, setContent] = React.useState(null);

  const handleClick = (e) => {
    e.preventDefault();
    setContent("New Content");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <a href="somepage.html" onClick={handleClick}>
        clcik here
      </a>
      <hr />
      {content ? <div>{content}</div> : null}
    </div>
  );
}

沙盒：https://codesandbox.io/s/practical-bush-mmpvo?file=/src/App.js

【讨论】：

【解决方案3】：

两个想法。

如果它只是用于网络爬虫，您可以使用 CSS 使用不可见元素。这样您就可以保留原始解决方案。网络爬虫通常不呈现 CSS。
您可以放入 iframe。这样只有 iframe 会导航。

此外，如果您有 robots.txt 文件，网络爬虫将不需要通过链接进行爬虫。

【讨论】：