jsx_a11y/anchor-is-valid 正確性

功能

HTML <a> 元素，帶有有效的 href 屬性，在形式上被定義為表示一個超連結。也就是說，一個 HTML 文件與另一個 HTML 文件之間的連結，或者一個 HTML 文件內部的一個位置與同一文件內部另一個位置之間的連結。

雖然以前可以在錨點元素上附加邏輯，但隨著 JSX 函式庫的出現，現在可以更容易地將邏輯附加到任何 HTML 元素，包括錨點。

此規則旨在防止使用者在點擊錨點時附加邏輯，並確保提供給錨點元素的 href 是有效的。如果錨點附加了邏輯，規則會建議將其轉換為 button，因為這很可能是使用者想要的。

錨點 <a></a> 元素應使用於導覽，而 <button></button> 應使用於使用者互動。

考慮以下情況

<>
  <a href="javascript:void(0)" onClick={foo}>
    Perform action
  </a>
  <a href="#" onClick={foo}>
    Perform action
  </a>
  <a onClick={foo}>Perform action</a>
</>

所有這些錨點實作都表示該元素僅用於執行 JavaScript 程式碼。以上所有內容都應替換為

<button onClick={foo}>Perform action</button>

`

為什麼這不好？

錨點不應具有邏輯且應具有正確的 href 屬性，原因有很多

• 它會擾亂使用者導覽的正確流程，例如，使用者想要在新分頁中開啟連結，但預設的「點擊」行為被阻止
• 它可能會導致無效連結，並且網路爬蟲無法瀏覽網站，有損 SEO 排名

範例

有效

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

無效

<>
  <a href={null}>navigate here</a>
  <a href={undefined}>navigate here</a>
  <a href>navigate here</a>
  <a href="javascript:void(0)">navigate here</a>
  <a href="https://example.com" onClick={something}>
    navigate here
  </a>
</>

參考

• WCAG 2.1.1

參考資料

• 規則來源