Direngsekeun: Anggo aplikasi History React Router v6

Masalah utama anu aya hubunganana sareng nganggo History React Router v6 nyaéta yén éta henteu ngadukung routing dumasar-hash. Ieu ngandung harti yén sakabéh URL kudu jadi jalur mutlak, nu bisa nyieun hésé pikeun ngatur jeung ngajaga aplikasi. Salaku tambahan, teu aya dukungan anu diwangun pikeun rute dinamis, anu tiasa janten masalah nalika nyiptakeun aplikasi kompleks sareng sababaraha halaman. Tungtungna, History React Router v6 henteu nyayogikeun dukungan pikeun rendering sisi server, anu tiasa diperyogikeun dina sababaraha 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 ieu ngimpor komponén BrowserRouter, Switch, Route, sareng useHistory tina perpustakaan réaksi-router-dom.
// Éta teras nyiptakeun fungsi anu disebut App anu nganggo hook useHistory pikeun nyiptakeun objek sajarah.
// Obyék sajarah ieu dianggo dina fungsi anu disebut handleClick anu ngadorong éntri énggal kana tumpukan sajarah nalika disebut.
// Fungsi App lajeng mulih sababaraha JSX nu ngawengku hiji tombol kalawan Handler onClick nu nelepon handleClick nalika diklik.
// Tungtungna, aya komponén Switch sareng komponén Rute di jero éta anu ngajantenkeun komponén NewLocation nalika jalurna cocog sareng "/ lokasi anyar".

Naon useHistory

useHistory mangrupikeun React Hook anu disayogikeun ku React Router anu ngamungkinkeun komponén pikeun ngaksés obyék sajarah pikeun nganapigasi sacara program. Éta tiasa dianggo pikeun nyorong lokasi énggal kana tumpukan sajarah, ngagentos lokasi ayeuna, mudik dina sajarah, jsb.

Kumaha kuring kéngingkeun sajarah rute dina réaksi

Dina React Router, anjeun tiasa kéngingkeun riwayat rute ku ngagunakeun hook useHistory. Hook ieu masihan aksés ka conto sajarah nu bisa Anjeun pake pikeun nganapigasi, mudik dina sajarah aplikasi anjeun, sareng nu sanesna. Pikeun ngagunakeun éta, kantun impor hook tina React Router teras nyauran éta dina komponén anjeun:

impor {useHistory} tina 'réact-router-dom';

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

// Ayeuna anjeun tiasa ngaksés sajarah rute via obyék `history`.

mulang (…);
}

Teu meta router ngagunakeun sajarah API

Leres, React Router nganggo HTML5 History API pikeun ngalacak lokasi ayeuna sareng sajarahna. Hal ieu ngamungkinkeun React Router pikeun ngapdet halaman tanpa kedah ngamuat deui, ngajantenkeun navigasi langkung gancang sareng lancar. API Sajarah ogé ngamungkinkeun pikeun ngaitkeun jero, anu matak ngagampangkeun pangguna pikeun ngabagikeun tautan anu langsung dibawa ka halaman khusus dina aplikasi.

tulisan keywords:

Leave a Comment