Selesai: Pautan penghala bertindak balas berfungsi

Masalah utama yang berkaitan dengan React Router Link ialah ia tidak mengemas kini sejarah penyemak imbas dengan betul apabila diklik. Ini bermakna jika pengguna mengklik pada Pautan dan kemudian menekan butang kembali, mereka akan dibawa kembali ke halaman sebelumnya dan bukannya halaman yang baru mereka navigasi. Selain itu, ini boleh menyebabkan tingkah laku yang tidak dijangka dalam sesetengah kes, seperti apabila menggunakan rentetan pertanyaan atau serpihan cincang.

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 sebagai Router, Route, Link } daripada "react-router-dom";
// Baris ini mengimport komponen BrowserRouter, Route dan Link daripada perpustakaan react-router-dom.

2.
// Baris ini mencipta komponen Penghala yang akan digunakan untuk mencipta laluan untuk aplikasi kami.

3.

//Ini menutup elemen div kami yang mengandungi semua laluan dan pautan kami

Pautan v6

Pautan v6 ialah komponen baharu dalam Penghala React yang menyediakan penyelesaian navigasi deklaratif yang boleh diakses untuk aplikasi React. Ia menggantikan komponen Pautan sebelumnya dan menyediakan lebih banyak ciri dan sokongan yang lebih baik untuk kebolehaksesan. Pautan v6 menyokong kedua-dua pautan biasa serta penghalaan dinamik, membolehkan pembangun mencipta pengalaman navigasi yang berkuasa tanpa perlu mengurus laluan secara manual atau menggunakan perpustakaan pihak ketiga. Ia juga menyokong pemaparan sebelah pelayan, yang membolehkan pembangun mencipta aplikasi mesra SEO dengan usaha yang minimum. Akhir sekali, Pautan v6 mempunyai sokongan terbina dalam untuk penjejakan analitis, menjadikannya lebih mudah untuk menjejak interaksi pengguna dengan aplikasi anda.

Mengapa Pautan Penghala React tidak berfungsi

Terdapat beberapa sebab yang mungkin mengapa React Router Link tidak berfungsi dalam React Router. Sebab yang paling biasa ialah komponen yang dipautkan tidak dikonfigurasikan atau disediakan dengan betul. Contohnya, jika komponen yang dipautkan tidak diimport dengan betul atau jika laluan laluan tidak betul, maka React Router Link tidak akan berfungsi. Selain itu, jika terdapat sebarang kesilapan dalam laluan laluan atau nama komponen, ini juga boleh menyebabkan masalah dengan React Router Link. Akhir sekali, jika terdapat sebarang konflik antara berbilang laluan (seperti dua laluan dengan laluan tepat yang sama), ini juga boleh menyebabkan masalah dengan React Router Link.