Diselesaikan: Gunakan aplikasi History React Router v6

Masalah utama terkait penggunaan History React Router v6 adalah tidak mendukung perutean berbasis hash. Ini berarti bahwa semua URL harus berupa jalur absolut, yang dapat mempersulit pengelolaan dan pemeliharaan aplikasi. Selain itu, tidak ada dukungan bawaan untuk rute dinamis, yang dapat menjadi masalah saat membuat aplikasi kompleks dengan banyak halaman. Terakhir, History React Router v6 tidak menyediakan dukungan apa pun untuk rendering sisi server, yang mungkin diperlukan dalam beberapa kasus.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Kode ini mengimpor komponen BrowserRouter, Switch, Route, dan useHistory dari library react-router-dom.
// Itu kemudian membuat fungsi yang disebut App yang menggunakan kait useHistory untuk membuat objek sejarah.
// Objek riwayat ini digunakan dalam fungsi yang disebut handleClick yang mendorong entri baru ke tumpukan riwayat saat dipanggil.
// Fungsi App kemudian mengembalikan beberapa JSX yang menyertakan tombol dengan handler onClick yang memanggil handleClick saat diklik.
// Terakhir, ada komponen Switch dengan satu komponen Route di dalamnya yang merender komponen NewLocation ketika jalurnya cocok dengan “/new-location”.

Apa itu useHistory

useHistory adalah React Hook yang disediakan oleh React Router yang memungkinkan komponen mengakses objek histori untuk menavigasi secara terprogram. Ini dapat digunakan untuk mendorong lokasi baru ke tumpukan riwayat, mengganti lokasi saat ini, bolak-balik dalam riwayat, dll.

Bagaimana cara mendapatkan riwayat rute sebagai reaksi

Di React Router, Anda bisa mendapatkan riwayat rute dengan menggunakan hook useHistory. Pengait ini memberikan akses ke instance riwayat yang dapat Anda gunakan untuk menavigasi, bolak-balik dalam riwayat aplikasi Anda, dan banyak lagi. Untuk menggunakannya, cukup impor pengait dari React Router dan panggil di komponen Anda:

import { useHistory } from 'react-router-dom';

const Komponen Saya = () => {
sejarah const = useHistory();

// Sekarang Anda dapat mengakses riwayat rute melalui objek `history`.

kembali (…);
}

Apakah router reaksi menggunakan API riwayat

Ya, React Router menggunakan HTML5 History API untuk melacak lokasi saat ini dan riwayatnya. Ini memungkinkan React Router memperbarui halaman tanpa harus memuat ulang, membuat navigasi lebih cepat dan lancar. History API juga memungkinkan untuk deep linking, yang memudahkan pengguna untuk berbagi link yang membawa mereka langsung ke halaman tertentu dalam aplikasi.

Pos terkait:

Tinggalkan Komentar