Skip to content
Biome 中文网
开发文档 当前版本 v1.9

useValidAnchor

诊断类别：lint/a11y/useValidAnchor

¥Diagnostic Category: lint/a11y/useValidAnchor

自从：v1.0.0

¥Since: v1.0.0

来源：

¥Sources:

强制所有锚点有效，并且它们是可导航元素。

¥Enforce that all anchors are valid, and they are navigable elements.

锚元素 (<a></a>) - 也称为超链接 - 是允许用户在同一页面、同一网站或另一个网站上浏览页面的重要元素。

¥The anchor element (<a></a>) - also called hyperlink - is an important element that allows users to navigate pages, in the same page, same website or on another website.

虽然以前可以将逻辑附加到锚点元素，但随着 JSX 库的出现，现在可以更轻松地将逻辑附加到任何 HTML 元素（包括锚点）。

¥While before it was possible to attach logic to an anchor element, with the advent of JSX libraries, it’s now easier to attach logic to any HTML element, anchors included.

此规则旨在防止用户在锚点元素提供的 href 无效时单击锚点时附加逻辑。将逻辑附加到锚元素时，避免在 href 内使用 # 符号。如果锚点附加了带有错误 href 的逻辑，规则建议将其转换为 button，因为这可能是用户想要的。

¥This rule is designed to prevent users from attaching logic at the click of anchors when the href provided to the anchor element is not valid. Avoid using # symbol inside the href when you are attaching the logic to the anchor element. If the anchor has logic attached to it with an incorrect href the rules suggests to turn it to a button, because that’s likely what the user wants.

锚点 <a></a> 元素应用于导航，而 <button></button> 应用于用户交互。

¥Anchor <a></a> elements should be used for navigation, while <button></button> should be used for user interaction.

锚点不应具有带有不正确 href 属性的逻辑的原因有很多：

¥There are many reasons why an anchor should not have a logic with an incorrect href attribute:

  • 它可能会破坏用户导航的正确流程，例如用户想要在另一个选项卡中打开链接，但默认的 “click” 行为被阻止

    ¥it can disrupt the correct flow of the user navigation e.g. a user that wants to open the link in another tab, but the default “click” behavior is prevented

  • 它可以提供无效链接，并且爬虫无法浏览网站，从而有可能降低 SEO 排名

    ¥it can source of invalid links, and crawlers can’t navigate the website, risking to penalize SEO ranking

有关详细说明，请查看 https://marcysutton.com/links-vs-buttons-in-modern-web-applications

¥For a detailed explanation, check out https://marcysutton.com/links-vs-buttons-in-modern-web-applications

示例

Section titled 示例

¥Examples

无效

Section titled 无效

¥Invalid

<a href={null}>navigate here</a>
code-block.jsx:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid value for the attribute href.
  
  > 1 │ <a href={null}>navigate here</a>
      │    ^^^^^^^^^^^
    2 │ 
  
  ℹ The href attribute should be a valid a URL
  
  ℹ Check this thorough explanation to better understand the context.
  
<a href={undefined}>navigate here</a>
code-block.jsx:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid value for the attribute href.
  
  > 1 │ <a href={undefined}>navigate here</a>
      │    ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The href attribute should be a valid a URL
  
  ℹ Check this thorough explanation to better understand the context.
  
<a href>navigate here</a>
code-block.jsx:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid value for the attribute href.
  
  > 1 │ <a href>navigate here</a>
      │    ^^^^
    2 │ 
  
  ℹ The href attribute should be a valid a URL
  
  ℹ Check this thorough explanation to better understand the context.
  
<a href="javascript:void(0)">navigate here</a>
code-block.jsx:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid value for the attribute href.
  
  > 1 │ <a href=“javascript:void
(0)“>navigate here</a>
      │    ^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The href attribute should be a valid a URL
  
  ℹ Check this thorough explanation to better understand the context.
  
<a onClick={something}>navigate here</a>
code-block.jsx:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Use a button element instead of an a element.
  
  > 1 │ <a onClick={something}>navigate here</a>
      │    ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Anchor elements should only be used for default sections or page navigation
  
  ℹ Check this thorough explanation to better understand the context.

有效

Section titled 有效

¥Valid

<a href="https://example.com" onClick={something}>navigate here</a>
<a href={`https://www.javascript.com`}>navigate here</a>
<a href={somewhere}>navigate here</a>
<a {...spread}>navigate here</a>

可访问性指南

Section titled 可访问性指南

¥Accessibility guidelines

相关链接

Section titled 相关链接

¥Related links