Selesai: Gunakan apl History React Router v6

Masalah utama yang berkaitan dengan penggunaan History React Router v6 ialah ia tidak menyokong penghalaan berasaskan hash. Ini bermakna semua URL mestilah laluan mutlak, yang boleh menyukarkan untuk mengurus dan menyelenggara aplikasi. Selain itu, tiada sokongan terbina dalam untuk laluan dinamik, yang boleh menjadi masalah apabila membuat aplikasi kompleks dengan berbilang halaman. Akhir sekali, History React Router v6 tidak menyediakan sebarang sokongan untuk pemaparan sebelah pelayan, yang mungkin diperlukan dalam beberapa kes.

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>   ); }

// Kod ini mengimport komponen BrowserRouter, Switch, Route dan useHistory daripada pustaka react-router-dom.
// Ia kemudian mencipta fungsi yang dipanggil App yang menggunakan cangkuk useHistory untuk mencipta objek sejarah.
// Objek sejarah ini digunakan dalam fungsi yang dipanggil handleClick yang menolak masukan baharu ke timbunan sejarah apabila ia dipanggil.
// Fungsi App kemudian mengembalikan beberapa JSX yang termasuk butang dengan pengendali onClick yang memanggil handleClick apabila diklik.
// Akhir sekali, terdapat komponen Suis dengan satu komponen Laluan di dalamnya yang menjadikan komponen NewLocation apabila laluannya sepadan dengan "/new-location".

Apa itu useHistory

useHistory ialah React Hook yang disediakan oleh React Router yang membenarkan komponen mengakses objek sejarah untuk menavigasi secara pengaturcaraan. Ia boleh digunakan untuk menolak lokasi baharu ke timbunan sejarah, menggantikan lokasi semasa, berulang-alik dalam sejarah, dsb.

Bagaimanakah saya boleh mendapatkan sejarah laluan sebagai tindak balas

Dalam Penghala React, anda boleh mendapatkan sejarah laluan dengan menggunakan cangkuk useHistory. Cangkuk ini memberikan akses kepada contoh sejarah yang boleh anda gunakan untuk menavigasi, berulang-alik dalam sejarah apl anda dan banyak lagi. Untuk menggunakannya, hanya import cangkuk dari React Router dan kemudian panggilnya dalam komponen anda:

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

const MyComponent = () => {
sejarah const = useHistory();

// Kini anda boleh mengakses sejarah laluan melalui objek `history`.

kembali (…);
}

Adakah penghala bertindak balas menggunakan API sejarah

Ya, React Router menggunakan API Sejarah HTML5 untuk menjejaki lokasi semasa dan sejarahnya. Ini membolehkan React Router mengemas kini halaman tanpa perlu memuatkan semula, menjadikan navigasi lebih pantas dan lancar. API Sejarah juga membenarkan pautan dalam, yang memudahkan pengguna berkongsi pautan yang membawa mereka terus ke halaman tertentu dalam aplikasi.