Masalah utama terkait React Router Link adalah tidak memperbarui riwayat browser dengan benar saat diklik. Ini berarti bahwa jika pengguna mengklik Tautan dan kemudian menekan tombol kembali, mereka akan dibawa kembali ke halaman sebelumnya alih-alih halaman yang baru saja mereka tinggalkan. Selain itu, ini bisa menyebabkan perilaku tak terduga dalam beberapa kasus, seperti saat menggunakan string kueri atau fragmen hash.
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
1. import {BrowserRouter as Router, Route, Link} dari “react-router-dom”;
// Baris ini mengimpor komponen BrowserRouter, Rute, dan Tautan dari pustaka react-router-dom.
2.
// Baris ini membuat komponen Router yang akan digunakan untuk membuat rute untuk aplikasi kita.
3.
4. Beranda
// Baris ini membuat tautan ke beranda aplikasi kita dengan teks 'Beranda'.
5. Tentang Kami
// Baris ini membuat tautan ke halaman tentang aplikasi kita dengan teks 'Tentang'.
6.
// Baris ini membuat rute untuk beranda aplikasi kita dan merender komponen Beranda saat diakses oleh pengguna.
7.
8.
// Ini menutup elemen div kami yang berisi semua rute dan tautan kami
Tautkan v6
Link v6 adalah komponen baru di React Router yang menyediakan solusi navigasi deklaratif yang dapat diakses untuk aplikasi React. Itu menggantikan komponen Tautan sebelumnya dan menyediakan lebih banyak fitur dan dukungan yang lebih baik untuk aksesibilitas. Link v6 mendukung tautan reguler dan juga perutean dinamis, memungkinkan pengembang membuat pengalaman navigasi yang kuat tanpa harus mengelola rute secara manual atau menggunakan pustaka pihak ketiga. Ini juga mendukung rendering sisi server, yang memungkinkan pengembang membuat aplikasi ramah SEO dengan sedikit usaha. Terakhir, Link v6 memiliki dukungan bawaan untuk pelacakan analitik, membuatnya lebih mudah untuk melacak interaksi pengguna dengan aplikasi Anda.
Mengapa React Router Link tidak berfungsi
Ada beberapa kemungkinan alasan mengapa React Router Link tidak berfungsi di React Router. Alasan paling umum adalah komponen yang ditautkan tidak dikonfigurasi atau diatur dengan benar. Misalnya, jika komponen yang ditautkan belum diimpor dengan benar, atau jika jalur rutenya salah, React Router Link tidak akan berfungsi. Selain itu, jika ada kesalahan ketik pada jalur rute atau nama komponen, hal ini juga dapat menyebabkan masalah pada React Router Link. Terakhir, jika ada konflik antara beberapa rute (seperti dua rute dengan jalur yang persis sama), ini juga dapat menyebabkan masalah dengan React Router Link.
