Lahendatud: kasutage rakendust History React Router v6

History React Router v6 kasutamisega seotud peamine probleem on see, et see ei toeta räsipõhist marsruutimist. See tähendab, et kõik URL-id peavad olema absoluutsed teed, mis võib raskendada rakenduse haldamist ja hooldamist. Lisaks puudub dünaamiliste marsruutide sisseehitatud tugi, mis võib olla probleemiks mitme leheküljega keerukate rakenduste loomisel. Lõpuks ei paku History React Router v6 mingit tuge serveripoolsele renderdamisele, mis võib mõnel juhul vajalik olla.

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

// See kood impordib react-ruuter-dom teegist komponendid BrowserRouter, Switch, Route ja useHistory.
// Seejärel loob see funktsiooni nimega App, mis kasutab ajalooobjekti loomiseks konksu useHistory.
// Seda ajalooobjekti kasutatakse funktsioonis HandelClick, mis lükkab väljakutsumisel ajaloovirnasse uue kirje.
// Rakenduse funktsioon tagastab seejärel mõne JSX-i, mis sisaldab nuppu onClicki töötlejaga, mis kutsub klõpsamisel esile HandClicki.
// Lõpuks on komponent Switch, mille sees on üks Marsruudi komponent, mis renderdab komponendi NewLocation, kui selle tee ühtib „/new-location”.

Mis on kasutusajalugu

useHistory on React Routeri pakutav React Hook, mis võimaldab komponentidel programmiliselt navigeerimiseks ajalooobjektile juurde pääseda. Seda saab kasutada uute asukohtade lükkamiseks ajaloovirnasse, praeguse asukoha asendamiseks, ajaloos edasi-tagasi liikumiseks jne.

Kuidas saada marsruudi ajalugu reageerima

React Routeris saate marsruudi ajaloo hankida, kasutades konksu useHistory. See konks annab juurdepääsu ajaloo eksemplarile, mida saate kasutada rakenduse ajaloos navigeerimiseks, edasi-tagasi liikumiseks ja muuks. Selle kasutamiseks importige konks React Routerist ja kutsuge see oma komponendis:

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

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

// Nüüd pääsete marsruudi ajaloole juurde objekti "ajalugu" kaudu.

tagastama (…);
}

Kas ruuter kasutab ajaloo API-t?

Jah, React Router kasutab praeguse asukoha ja selle ajaloo jälgimiseks HTML5 History API-t. See võimaldab React Routeril lehte värskendada ilma seda uuesti laadimata, muutes navigeerimise kiiremaks ja sujuvamaks. Ajaloo API võimaldab ka sügavat linkimist, mis muudab kasutajatel lihtsamaks linkide jagamise, mis viivad nad rakenduses otse konkreetsele lehele.