Riješeno: Koristite aplikaciju History React Router v6

Glavni problem vezan uz korištenje History React Routera v6 je taj što ne podržava usmjeravanje temeljeno na hash-u. To znači da svi URL-ovi moraju biti apsolutni putovi, što može otežati upravljanje i održavanje aplikacije. Dodatno, ne postoji ugrađena podrška za dinamičke rute, što može predstavljati problem pri izradi složenih aplikacija s više stranica. Konačno, History React Router v6 ne pruža nikakvu podršku za iscrtavanje na strani poslužitelja, što može biti potrebno 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 stvara funkciju pod nazivom App koja koristi kuku useHistory za stvaranje povijesnog objekta.
// Ovaj objekt povijesti koristi se u funkciji koja se zove handleClick koja gura novi unos na stog povijesti kada se pozove.
// Funkcija App zatim vraća neki JSX koji uključuje gumb s onClick rukovateljem koji poziva handleClick kada se klikne.
// Konačno, postoji komponenta Switch s jednom komponentom Route unutar nje koja renderira komponentu NewLocation kada njezina putanja odgovara “/new-location”.

Što je useHistory

useHistory je React kuka koju pruža React Router i koja komponentama omogućuje pristup objektu povijesti kako bi se kretali programski. Može se koristiti za guranje novih lokacija na hrpu povijesti, zamjenu trenutne lokacije, kretanje naprijed-natrag u povijesti itd.

Kako mogu dobiti povijest rute u React

U React Routeru možete dobiti povijest rute korištenjem kuke useHistory. Ova kuka daje pristup instanci povijesti koju možete koristiti za navigaciju, kretanje naprijed-natrag kroz povijest vaše aplikacije i više. Da biste ga koristili, jednostavno uvezite kuku iz React Routera i zatim je pozovite u svojoj komponenti:

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

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

// Sada možete pristupiti povijesti rute putem objekta `history`.

povratak (…);
}

Reagira li usmjerivač koristi povijest API-ja

Da, React Router koristi HTML5 History API za praćenje trenutne lokacije i njezine povijesti. To omogućuje React Routeru da ažurira stranicu bez ponovnog učitavanja, čineći navigaciju bržom i lakšom. History API također omogućuje dubinsko povezivanje, što korisnicima olakšava dijeljenje veza koje ih vode izravno na određenu stranicu u aplikaciji.