Rešeno: Uporabite aplikacijo History React Router v6

Glavna težava, povezana z uporabo History React Router v6, je ta, da ne podpira usmerjanja na podlagi zgoščenosti. To pomeni, da morajo biti vsi URL-ji absolutne poti, kar lahko oteži upravljanje in vzdrževanje aplikacije. Poleg tega ni vgrajene podpore za dinamične poti, kar je lahko težava pri ustvarjanju kompleksnih aplikacij z več stranmi. Nazadnje, History React Router v6 ne nudi nobene podpore za upodabljanje na strani strežnika, kar je v nekaterih primerih morda potrebno.

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

// Ta koda uvozi komponente BrowserRouter, Switch, Route in useHistory iz knjižnice react-router-dom.
// Nato ustvari funkcijo z imenom App, ki uporablja kljuko useHistory za ustvarjanje predmeta zgodovine.
// Ta zgodovinski objekt se uporablja v funkciji, imenovani handleClick, ki ob klicu potisne nov vnos v sklad zgodovine.
// Funkcija App nato vrne nekaj JSX, ki vključuje gumb z obdelovalcem onClick, ki ob kliku pokliče handleClick.
// Končno je tu še komponenta Switch z eno komponento Route znotraj nje, ki upodobi komponento NewLocation, ko se njena pot ujema z »/new-location«.

Kaj je useHistory

useHistory je React Hook, ki ga zagotavlja React Router in omogoča komponentam dostop do predmeta zgodovine za programsko krmarjenje. Uporablja se lahko za potiskanje novih lokacij v sklad zgodovine, zamenjavo trenutne lokacije, premikanje naprej in nazaj po zgodovini itd.

Kako dobim zgodovino poti v React

V React Routerju lahko pridobite zgodovino poti z uporabo kljuke useHistory. Ta kavelj omogoča dostop do primerka zgodovine, ki ga lahko uporabite za navigacijo, premikanje naprej in nazaj po zgodovini vaše aplikacije in drugo. Če ga želite uporabiti, preprosto uvozite kavelj iz React Routerja in ga nato pokličite v svoji komponenti:

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

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

// Zdaj lahko dostopate do zgodovine poti prek predmeta `history`.

vrnitev (…);
}

Ali reagira, usmerjevalnik uporablja API za zgodovino

Da, React Router uporablja API za zgodovino HTML5 za spremljanje trenutne lokacije in njene zgodovine. To omogoča React Routerju, da posodobi stran, ne da bi jo moral ponovno naložiti, zaradi česar je navigacija hitrejša in bolj gladka. History API omogoča tudi globoko povezovanje, kar uporabnikom olajša skupno rabo povezav, ki jih popeljejo neposredno na določeno stran v aplikaciji.