Vấn đề chính liên quan đến các liên kết bên ngoài của Bộ định tuyến React là chúng có thể gây ra hành vi không mong muốn khi điều hướng giữa các trang khác nhau. Ví dụ: nếu người dùng nhấp vào liên kết bên ngoài khi đang ở trang Bộ định tuyến React, trình duyệt sẽ điều hướng khỏi trang hiện tại thay vì định tuyến đến trang mới trong ứng dụng. Điều này có thể dẫn đến sự nhầm lẫn và thất vọng cho những người dùng đang mong đợi sự chuyển đổi suôn sẻ giữa các trang. Ngoài ra, các liên kết bên ngoài cũng có thể gây ra sự cố với SEO do các công cụ tìm kiếm có thể không lập chỉ mục đúng nội dung từ các nguồn bên ngoài.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Dòng này nhập thành phần Liên kết từ thư viện Reac-router-dom.
2. Dòng này tạo thành phần liên kết sẽ chuyển hướng đến “https://www.example.com” khi được nhấp và mở nó trong một tab mới mà không có thông tin liên kết giới thiệu nào được gửi đến trang mới. Văn bản của liên kết sẽ là “Liên kết ngoài”.
Liên kết ngoài là gì
Liên kết ngoài trong React Router là liên kết đưa người dùng đến một trang bên ngoài ứng dụng. Đây có thể là một trang web bên ngoài hoặc một ứng dụng khác. Liên kết bên ngoài được sử dụng để cung cấp cho người dùng thông tin bổ sung hoặc tài nguyên liên quan đến nội dung trong ứng dụng. Chúng cũng có thể được sử dụng như một cách để hướng người dùng đến các ứng dụng hoặc trang web khác để khám phá thêm.
Cách thêm liên kết ngoài với React Router
Thêm một liên kết bên ngoài với React Router trong React Router là một quá trình đơn giản. Trước tiên, bạn cần nhập thành phần Liên kết từ gói react-router-dom. Sau đó, bạn có thể sử dụng thành phần Liên kết để tạo liên kết đến một URL bên ngoài. Cú pháp tạo liên kết như sau:
Ví dụ: nếu bạn muốn tạo một liên kết tới Google, nó sẽ giống như sau:
Khi bạn đã tạo liên kết của mình, bạn có thể thêm các đạo cụ bổ sung như thuộc tính target và rel để có khả năng truy cập và mục đích bảo mật tốt hơn. Ví dụ:
