Masalah utama yang berkaitan dengan pautan luar React Router ialah ia boleh menyebabkan tingkah laku yang tidak dijangka apabila menavigasi antara halaman yang berbeza. Sebagai contoh, jika pengguna mengklik pada pautan luaran semasa berada di halaman React Router, penyemak imbas akan menavigasi keluar dari halaman semasa dan bukannya menghala ke halaman baharu dalam aplikasi. Ini boleh menyebabkan kekeliruan dan kekecewaan bagi pengguna yang menjangkakan peralihan yang lancar antara halaman. Selain itu, pautan luaran juga boleh menyebabkan masalah dengan SEO kerana enjin carian mungkin tidak dapat mengindeks kandungan dengan betul daripada sumber luaran.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Baris ini mengimport komponen Pautan daripada perpustakaan react-router-dom.
2. Baris ini mencipta elemen pautan yang akan mengubah hala ke "https://www.example.com" apabila diklik dan membukanya dalam tab baharu tanpa maklumat perujuk dihantar ke halaman baharu. Teks pautan akan menjadi "Pautan Luaran".
Apakah pautan luaran
Pautan luaran dalam React Router ialah pautan yang membawa pengguna ke halaman di luar aplikasi. Ini mungkin tapak web luaran, atau aplikasi lain. Pautan luaran digunakan untuk memberikan pengguna maklumat tambahan atau sumber yang berkaitan dengan kandungan dalam aplikasi. Ia juga boleh digunakan sebagai cara untuk mengarahkan pengguna ke aplikasi atau tapak web lain untuk penerokaan selanjutnya.
Bagaimana untuk menambah pautan luaran dengan React Router
Menambah pautan luaran dengan React Router dalam React Router ialah proses yang mudah. Mula-mula, anda perlu mengimport komponen Pautan daripada pakej react-router-dom. Kemudian, anda boleh menggunakan komponen Pautan untuk membuat pautan ke URL luaran. Sintaks untuk membuat pautan kelihatan seperti ini:
Sebagai contoh, jika anda ingin membuat pautan ke Google, ia akan kelihatan seperti ini:
Sebaik sahaja anda telah membuat pautan anda, anda boleh menambah prop tambahan seperti atribut sasaran dan rel untuk tujuan kebolehcapaian dan keselamatan yang lebih baik. Sebagai contoh:
