與 React Router 外部鏈接相關的主要問題是它們在不同頁面之間導航時可能會導致意外行為。 例如,如果用戶在 React Router 頁面上單擊外部鏈接,瀏覽器將離開當前頁面,而不是路由到應用程序內的新頁面。 對於期望頁面之間平滑過渡的用戶來說,這可能會導致混淆和沮喪。 此外,外部鏈接也可能導致 SEO 問題,因為搜索引擎可能無法正確索引來自外部來源的內容。
import { Link } from "react-router-dom"; <Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1.這一行從react-router-dom庫中導入Link組件。
2. 這一行創建了一個鏈接元素,當點擊時將重定向到“https://www.example.com”,並在新標籤頁中打開它,沒有發送到新頁面的引用信息。 鏈接的文本將是“外部鏈接”。
什麼是外部鏈接
React Router 中的外部鏈接是將用戶帶到應用程序外部頁面的鏈接。 這可能是外部網站或其他應用程序。 外部鏈接用於為用戶提供與應用程序內容相關的附加信息或資源。 它們還可以用作將用戶引導至其他應用程序或網站以進行進一步探索的一種方式。
如何使用 React Router 添加外部鏈接
在 React Router 中使用 React Router 添加外部鏈接是一個簡單的過程。 首先,您需要從 react-router-dom 包中導入 Link 組件。 然後,您可以使用鏈接組件創建指向外部 URL 的鏈接。 創建鏈接的語法如下所示:
例如,如果你想創建一個指向谷歌的鏈接,它看起來像這樣:
谷歌
創建鏈接後,您可以添加其他道具,例如 target 和 rel 屬性,以實現更好的可訪問性和安全性。 例如:
谷歌