連結

「連結」元件讓您能輕鬆地使用主題色彩和排版樣式自訂錨點元素。

基本連結

「連結」元件是建立在「排版」元件之上的，這表示您可以使用其 props。

然而，「連結」元件與「排版」元件有一些不同的預設 props

• color="primary"，因為連結需要突出顯示。
• variant="inherit"，因為連結在大多數情況下會作為「排版」元件的子元件使用。

底線

underline prop 可用於設定底線行為。預設值為 always。

安全性

當您將 target="_blank" 與「連結」一起使用時，建議在連結到第三方內容時，務必設定 rel="noopener" 或 rel="noreferrer"。

• rel="noopener" 可防止新頁面存取 window.opener 屬性，並確保它在獨立的程序中執行。若沒有此設定，目標頁面可能會將您的頁面重新導向至惡意 URL。
• rel="noreferrer" 具有相同的效果，但也會阻止將 *Referer* 標頭傳送至新頁面。⚠️ 移除 referrer 標頭會影響分析。

第三方路由函式庫

一個常見的使用情境是在僅限於用戶端執行導航，而無需往返伺服器的 HTTP 請求。「連結」元件提供了 component prop 來處理此使用情境。此處有 更詳細的指南。

無障礙功能

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/link/)

• 在為連結提供內容時，請避免使用「點擊這裡」或「前往」等通用描述。請改用 具體的描述。
• 為了獲得最佳的使用者體驗，連結應該從頁面上的文字中脫穎而出。例如，您可以保留預設的 underline="always" 行為。
• 如果連結沒有有意義的 href，則應使用 <button> 元素來呈現。下面的範例示範如何正確地使用 <button> 進行連結。

鍵盤無障礙功能

• 當使用者按下 Tab 鍵時，互動式元素應以一致的順序接收焦點。
• 使用者應能夠透過按下 Enter 來開啟連結。

螢幕閱讀器無障礙功能

• 當連結收到焦點時，螢幕閱讀器應宣告描述性的連結名稱。如果連結在新視窗或瀏覽器分頁中開啟，請新增 aria-label 以告知螢幕閱讀器使用者——例如，「若要瞭解更多資訊，請造訪關於我們頁面 (在新視窗中開啟)」。

API

請參閱以下文件，以取得此處提及之元件的所有 props 和 classes 的完整參考。

• <Link />