Javascript 锚定还是按钮？

假设有一段文本，不管它是作为一个传统的链接还是页面上的按钮样式，当单击它时，会导致一个具有新页面/URL的新页面。但是导航是以编程方式进行的，例如通过react路由器，使用历史web API而不是硬HTTP刷新

在这种情况下，它应该是一个带有href属性的传统锚定链接，例如，还是一个按钮

备选案文1：

---

这里的缺点是，如果您希望它看起来像一个传统的链接，您需要应用自定义样式。在我看来，在某些方面，它真的像一个传统的链接。但这对屏幕阅读器来说会更好。

我建议您使用语义HTML。这意味着尽可能多地使用正确的HTML元素实现其预期目的

更易于开发-您可以免费获得一些功能，而且可以说更易于理解。 更好的手机-语义HTML可以说比非语义的意大利面代码在文件大小上更轻，并且更容易做出响应。 有利于SEO——搜索引擎对标题、链接等内部关键词的重视程度高于非语义关键词 s、 等等，这样您的文档将更容易被客户查找。

---

我建议您使用语义HTML。这意味着尽可能多地使用正确的HTML元素实现其预期目的

更易于开发-您可以免费获得一些功能，而且可以说更易于理解。 更好的手机-语义HTML可以说比非语义的意大利面代码在文件大小上更轻，并且更容易做出响应。 有利于SEO——搜索引擎对标题、链接等内部关键词的重视程度高于非语义关键词 s、 等等，这样您的文档将更容易被客户查找。

---

有一个

当点击“做你的事”时，你可以只做e.preventDefault。然后导航。NavLink生成

单击“做你的事”时，你可以只做e.preventDefault。然后导航。NavLink生成

我不能评论React，但这里是SPA的正确方法，在React中实现它应该很简单

简短回答 在说明页面正在加载的区域上使用超链接。你可以用谷歌搜索如何正确地实现这一点

此外，当新页面加载时，您需要管理焦点

最好的方法是为每个tabindex=-1的页面添加一个级别1的标题

页面加载后，您在JavaScript导航函数中执行的最后一个操作是将焦点放在该标题上

这有两个好处：

它让用户知道他们现在在哪里 它还让他们知道页面加载何时完成，因为AJAX导航不会在大多数屏幕阅读器中宣布页面何时加载。

---

通过使用tabindex=-1，这意味着标题不会被JavaScript以外的任何东西聚焦，因此不会干扰正常的文档流。

我不能对React发表评论，但这里是SPA的正确方法，在React中实现它应该很简单

简短回答 在说明页面正在加载的区域上使用超链接。你可以用谷歌搜索如何正确地实现这一点

此外，当新页面加载时，您需要管理焦点

最好的方法是为每个tabindex=-1的页面添加一个级别1的标题

页面加载后，您在JavaScript导航函数中执行的最后一个操作是将焦点放在该标题上

这有两个好处：

它让用户知道他们现在在哪里 它还让他们知道页面加载何时完成，因为AJAX导航不会在大多数屏幕阅读器中宣布页面何时加载。

---

通过使用tabindex=-1，这意味着标题不会被JavaScript以外的任何东西聚焦，因此不会干扰正常的文档流。

使用history.push或Link。该链接将转换为但不会进行硬刷新：@Enchew现在我正在使用history.push，但是在href属性的锚定标记中放置什么？现在它也不是很容易访问。我的意思是使用history.push按钮，但如果您想要标记，请使用“react router dom”中的组件，而不是纯@Enchew按钮。但是，页面/URL导航应该使用这些按钮吗？有时需要它们-例如，如果您想执行ajax调用，然后重定向用户，或者保存状态中的某个东西，或者任何一般的行为。如果您想要简单的导航，我建议您使用history.push或Link。该链接将转换为但不会进行硬刷新：@Enchew现在我正在使用history.push，但是在href属性的锚定标记中放置什么？现在它也不是很容易访问。我的意思是使用history.push按钮，但是如果您想要标记，请使用“react router dom”中的组件，而不是纯@Enchew按钮来进行页面/URL导航

---

gh？有时它们是需要的——例如，如果您希望执行ajax调用，然后重定向用户，或者在状态中保存某些内容，或者通常的任何操作。如果您想要简单的导航，我建议您使用“我不明白投否决票的原因”。它解决了问题？我想你得到了否决票，因为它不回答是使用按钮还是超链接。对我来说似乎有点苛刻，因为有人可能会评论这个让你修复它。这似乎是唯一的解释。如果这是原因的话，这不仅仅是苛刻的，这是一件n00b的事情。With以HTML格式生成，并在该路径中包含活动类，允许您根据需要进行样式设置。我提供了工作示例“_ツ_/“我不明白投票失败的原因。它解决了问题？我想你得到了否决票，因为它不回答是使用按钮还是超链接。对我来说似乎有点苛刻，因为有人可能会评论这个让你修复它。这似乎是唯一的解释。如果这是原因的话，这不仅仅是苛刻的，这是一件n00b的事情。With以HTML格式生成，并在该路径中包含活动类，允许您根据需要进行样式设置。我提供了工作示例“_ツ_/爱你的答案，爱它！正是我想要的-谢谢！没问题，很高兴我能帮忙！爱你的答案，爱它！正是我想要的-谢谢！没问题，很高兴我能帮忙！

<a href="#" onClick={navigateToNextPage}>Link</a>

<button onClick={navigateToNextPage}>Link</a>

import React from "react";
import { NavLink, withRouter } from "react-router-dom";

function Header(props) {
  const handleClick = e => {
    e.preventDefault();
    console.log("DO SOMETHING");
    props.history.push(e.target.pathname);
  };
  return (
    <ul>
      <li>
        <NavLink exact to="/" onClick={handleClick}>
          Home
        </NavLink>
      </li>
      <li>
        <NavLink to="/about" onClick={handleClick}>
          About
        </NavLink>
      </li>
      <li>
        <NavLink to="/topics" onClick={handleClick}>
          NavLink
        </NavLink>
      </li>
    </ul>
  );
}

export const HeaderNav = withRouter(Header);

<a href="new-page-url" onClick={navigateToNextPage}>Link</a>