Rezolvat: utilizați aplicația History React Router v6

Principala problemă legată de utilizarea History React Router v6 este că nu acceptă rutarea bazată pe hash. Aceasta înseamnă că toate adresele URL trebuie să fie căi absolute, ceea ce poate face dificilă gestionarea și întreținerea aplicației. În plus, nu există suport încorporat pentru rutele dinamice, ceea ce poate fi o problemă atunci când se creează aplicații complexe cu mai multe pagini. În cele din urmă, History React Router v6 nu oferă niciun suport pentru randarea pe server, care poate fi necesară în unele cazuri.

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

// Acest cod importă componentele BrowserRouter, Switch, Route și useHistory din biblioteca react-router-dom.
// Apoi creează o funcție numită App care folosește cârligul useHistory pentru a crea un obiect istoric.
// Acest obiect istoric este folosit într-o funcție numită handleClick care împinge o nouă intrare în stiva de istoric atunci când este apelată.
// Funcția App returnează apoi niște JSX care include un buton cu un handler onClick care apelează handleClick atunci când este făcut clic.
// În cele din urmă, există o componentă Switch cu o componentă Route în interiorul ei care redă componenta NewLocation atunci când calea acesteia se potrivește cu „/new-location”.

Ce este folosIstoria

useHistory este un React Hook furnizat de React Router care permite componentelor să acceseze obiectul istoric pentru a naviga programatic. Poate fi folosit pentru a împinge noi locații în stiva de istoric, pentru a înlocui locația actuală, pentru a merge înainte și înapoi în istorie etc.

Cum obțin istoricul rutei în reacție

În React Router, puteți obține istoricul rutei utilizând cârligul useHistory. Acest cârlig oferă acces la instanța istorică pe care o puteți folosi pentru a naviga, a merge înainte și înapoi în istoricul aplicației dvs. și multe altele. Pentru a-l folosi, pur și simplu importați cârligul din React Router și apoi apelați-l în componenta dvs.:

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

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

// Acum puteți accesa istoricul rutei prin obiectul `istory`.

întoarcere (…);
}

React router-ul folosește API-ul istoric

Da, React Router folosește HTML5 History API pentru a ține evidența locației curente și a istoricului acesteia. Acest lucru permite React Router să actualizeze pagina fără a fi nevoie să o reîncarce, făcând navigarea mai rapidă și mai fluidă. API-ul History permite, de asemenea, legături profunde, ceea ce face mai ușor pentru utilizatori să partajeze link-uri care îi duc direct la o anumită pagină dintr-o aplicație.