Riješeno: Koristite aplikaciju History React Router v6

Glavni problem vezan za korištenje History React Router v6 je taj što ne podržava rutiranje zasnovano na hash-u. To znači da svi URL-ovi moraju biti apsolutne putanje, što može otežati upravljanje i održavanje aplikacije. Osim toga, ne postoji ugrađena podrška za dinamičke rute, što može biti problem pri kreiranju složenih aplikacija s više stranica. Konačno, History React Router v6 ne pruža nikakvu podršku za prikazivanje na strani servera, što može biti neophodno u nekim slučajevima.

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

// Ovaj kod uvozi komponente BrowserRouter, Switch, Route i useHistory iz biblioteke react-router-dom.
// Zatim kreira funkciju pod nazivom App koja koristi useHistory kuku za kreiranje historijskog objekta.
// Ovaj historijski objekt se koristi u funkciji zvanoj handleClick koja gura novi unos u historijski stog kada se pozove.
// Funkcija aplikacije zatim vraća neki JSX koji uključuje gumb s onClick rukovaocem koji poziva handleClick kada se klikne.
// Konačno, postoji komponenta Switch sa jednom komponentom Route unutar nje koja renderira komponentu NewLocation kada se njena putanja podudara sa “/new-location”.

Šta je useHistory

useHistory je React Hook koji pruža React Router koji omogućava komponentama da pristupe historijskom objektu radi programske navigacije. Može se koristiti za guranje novih lokacija u stog historije, zamjenu trenutne lokacije, vraćanje naprijed-nazad u povijest, itd.

Kako da dobijem istoriju ruta u reakciji

U React Routeru možete dobiti historiju ruta korištenjem kuke useHistory. Ova kuka daje pristup instanci historije koju možete koristiti za navigaciju, kretanje naprijed-natrag u historiji vaše aplikacije i još mnogo toga. Da biste ga koristili, jednostavno uvezite zakačicu iz React Routera i zatim je pozovite u svojoj komponenti:

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

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

// Sada možete pristupiti historiji rute preko `history` objekta.

povratak (…);
}

Da li reaguje ruter koristi historijski API

Da, React Router koristi HTML5 History API za praćenje trenutne lokacije i njene istorije. Ovo omogućava React Routeru da ažurira stranicu bez potrebe za ponovnim učitavanjem, čineći navigaciju bržom i glatkijom. Historijski API također omogućava dubinsko povezivanje, što korisnicima olakšava dijeljenje veza koje ih vode direktno na određenu stranicu u aplikaciji.