Zgjidhur: Përdorni aplikacionin History React Router v6

Problemi kryesor që lidhet me përdorimin e History React Router v6 është se ai nuk mbështet rrugëzimin e bazuar në hash. Kjo do të thotë që të gjitha URL-të duhet të jenë shtigje absolute, gjë që mund ta bëjë të vështirë menaxhimin dhe mirëmbajtjen e aplikacionit. Për më tepër, nuk ka mbështetje të integruar për rrugët dinamike, gjë që mund të jetë problem kur krijohen aplikacione komplekse me shumë faqe. Së fundi, History React Router v6 nuk ofron ndonjë mbështetje për paraqitjen nga ana e serverit, gjë që mund të jetë e nevojshme në disa raste.

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

// Ky kod importon komponentët BrowserRouter, Switch, Route dhe useHistory nga biblioteka react-router-dom.
// Më pas krijon një funksion të quajtur App i cili përdor grepin useHistory për të krijuar një objekt historie.
// Ky objekt historik përdoret në një funksion të quajtur handleClick i cili shtyn një hyrje të re në pirgun e historisë kur thirret.
// Funksioni App kthen më pas disa JSX që përfshin një buton me një mbajtës onClick që thërret handleClick kur klikohet.
// Së fundi, ekziston një komponent Switch me një komponent Route brenda tij që e jep komponentin NewLocation kur shtegu i tij përputhet me "/new-location".

Çfarë është historia e përdorimit

useHistory është një React Hook i ofruar nga React Router që lejon komponentët të aksesojnë objektin e historisë në mënyrë që të lundrojnë në mënyrë programore. Mund të përdoret për të shtyrë vendndodhje të reja në pirgun e historisë, për të zëvendësuar vendndodhjen aktuale, për të shkuar përpara dhe mbrapa në histori, etj.

Si mund ta marr historinë e rrugës në reagim

Në React Router, mund të merrni historinë e rrugës duke përdorur grepin useHistory. Ky grep jep akses në shembullin e historisë që mund të përdorni për të lundruar, për të shkuar përpara dhe prapa në historikun e aplikacionit tuaj dhe më shumë. Për ta përdorur atë, thjesht importoni grepin nga React Router dhe më pas thirreni atë në komponentin tuaj:

importoni { useHistory } nga 'react-router-dom';

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

// Tani mund të hyni në historikun e rrugës përmes objektit "histori".

kthimi (…);
}

A përdor API-në e historisë së routerit reagues

Po, React Router përdor API-në e historisë HTML5 për të mbajtur gjurmët e vendndodhjes aktuale dhe historisë së saj. Kjo i lejon React Router të përditësojë faqen pa pasur nevojë ta ringarkojë atë, duke e bërë navigimin më të shpejtë dhe më të butë. Historia API gjithashtu lejon lidhjen e thellë, gjë që e bën më të lehtë për përdoruesit të ndajnë lidhjet që i çojnë ata drejtpërdrejt në një faqe specifike në një aplikacion.