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

Question

我正在开发一个项目，其中我们使用 <button> 元素作为一种链接，例如，我们打开用户想要的页面，不同之处在于我们不会将用户重定向到该页面, 只需将其呈现在 div.

中

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

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

我想这个问题可以从两个方面来问：

How to prevent an <a> tag from redirecting user, while keeping its href attribute?

或

How can I make my links crawable while preventing them from redirecting the user, if clicked?

我已经试过了：

event.stopPropagation()
event.preventDefault()
return 错误；

来自 :

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

Answer 1

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

Answer 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

Answer 3

两个想法。

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

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

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

How to prevent an <a> tag from redirecting user, while keeping its href attribute?

html

anchor

web-crawler

reactjs