Išspręsta: naudokite „History React Router v6“ programą

Pagrindinė problema, susijusi su History React Router v6 naudojimu, yra ta, kad jis nepalaiko maišos pagrindu pagrįsto maršruto parinkimo. Tai reiškia, kad visi URL turi būti absoliutūs keliai, todėl gali būti sunku valdyti ir prižiūrėti programą. Be to, nėra integruoto dinaminių maršrutų palaikymo, o tai gali būti problema kuriant sudėtingas programas su keliais puslapiais. Galiausiai, History React Router v6 nepalaiko serverio atvaizdavimo, kuris kai kuriais atvejais gali būti reikalingas.

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

// Šis kodas importuoja „BrowserRouter“, „Switch“, „Route“ ir „useHistory“ komponentus iš „react-router-dom“ bibliotekos.
// Tada sukuriama funkcija „App“, kuri istorijos objektui sukurti naudoja „useHistory“ kabliuką.
// Šis istorijos objektas naudojamas funkcijoje HandelClick, kuri iškviečia naują įrašą į istorijos krūvą.
// Tada programos funkcija grąžina tam tikrą JSX, kurioje yra mygtukas su onClick tvarkykle, kuri spustelėjus iškviečia „handleClick“.
// Galiausiai yra komponentas „Switch“, kurio viduje yra vienas maršruto komponentas, kuris pateikia „NewLocation“ komponentą, kai jo kelias atitinka „/new-location“.

Kas yra naudojimo istorija

„useHistory“ yra „React Router“ teikiamas „React Hook“, leidžiantis komponentams pasiekti istorijos objektą, kad būtų galima naršyti programiškai. Jis gali būti naudojamas norint perkelti naujas vietas į istorijos krūvą, pakeisti dabartinę vietą, eiti pirmyn ir atgal istorijoje ir pan.

Kaip gauti maršruto istoriją

„React Router“ galite gauti maršruto istoriją naudodami „useHistory Hook“. Šis kabliukas suteikia prieigą prie istorijos egzemplioriaus, kurį galite naudoti norėdami naršyti, eiti pirmyn ir atgal programos istorijoje ir dar daugiau. Norėdami jį naudoti, tiesiog importuokite kabliuką iš „React Router“ ir iškvieskite jį savo komponente:

importuoti { useHistory } iš 'react-router-dom';

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

// Dabar maršruto istoriją galite pasiekti naudodami objektą „istorija“.

grąžinti (...);
}

Ar reaguoja maršrutizatorius naudoja istorijos API

Taip, „React Router“ naudoja HTML5 istorijos API, kad galėtų sekti dabartinę vietą ir jos istoriją. Tai leidžia „React Router“ atnaujinti puslapį jo neįkeliant iš naujo, todėl naršymas tampa greitesnis ir sklandesnis. Istorijos API taip pat leidžia naudoti giliąsias nuorodas, todėl vartotojams lengviau bendrinti nuorodas, nukreipiančias juos tiesiai į konkretų programos puslapį.