Atrisināts: izmantojiet lietotni History React Router v6

Galvenā problēma, kas saistīta ar History React Router v6 izmantošanu, ir tā, ka tas neatbalsta uz jaucējfunkciju balstītu maršrutēšanu. Tas nozīmē, ka visiem URL ir jābūt absolūtiem ceļiem, kas var apgrūtināt lietojumprogrammas pārvaldību un uzturēšanu. Turklāt nav iebūvēta atbalsta dinamiskiem maršrutiem, kas var radīt problēmas, veidojot sarežģītas lietojumprogrammas ar vairākām lapām. Visbeidzot, History React Router v6 nesniedz nekādu atbalstu servera puses renderēšanai, kas dažos gadījumos var būt nepieciešams.

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 kods importē komponentus BrowserRouter, Switch, Route un useHistory no react-router-dom bibliotēkas.
// Pēc tam tiek izveidota funkcija App, kas izmanto āķi useHistory, lai izveidotu vēstures objektu.
// Šis vēstures objekts tiek izmantots funkcijā handelClick, kas nospiež jaunu ierakstu vēstures kaudzē, kad tas tiek izsaukts.
// Lietotnes funkcija pēc tam atgriež kādu JSX, kurā ir poga ar onClick apdarinātāju, kas izsauc HandClick, noklikšķinot.
// Visbeidzot, ir Switch komponents ar vienu Maršruta komponentu, kas atveido NewLocation komponentu, ja tā ceļš atbilst “/new-location”.

Kas ir lietošanas vēsture

useHistory ir React Hook, ko nodrošina React Router, kas ļauj komponentiem piekļūt vēstures objektam, lai programmatiski pārvietotos. To var izmantot, lai ievietotu jaunas atrašanās vietas vēstures kaudzē, aizstātu pašreizējo atrašanās vietu, pārvietotos uz priekšu un atpakaļ vēsturē utt.

Kā reaģēt uz maršruta vēsturi

Programmā React Router varat iegūt maršruta vēsturi, izmantojot useHistory āķi. Šis āķis nodrošina piekļuvi vēstures gadījumam, ko varat izmantot, lai pārvietotos, pārvietotos uz priekšu un atpakaļ savas lietotnes vēsturē un veiktu citas darbības. Lai to izmantotu, vienkārši importējiet āķi no React Router un pēc tam izsauciet to savā komponentā:

importēt { useHistory } no 'react-router-dom';

const MyComponent = () => {
const vēsture = useHistory();

// Tagad jūs varat piekļūt maršruta vēsturei, izmantojot objektu "vēsture".

atgriešanās (…);
}

Vai reaģē maršrutētājs, izmantojot vēstures API

Jā, React Router izmanto HTML5 vēstures API, lai izsekotu pašreizējai atrašanās vietai un tās vēsturei. Tas ļauj React Router atjaunināt lapu bez nepieciešamības to atkārtoti ielādēt, padarot navigāciju ātrāku un vienmērīgāku. Vēstures API nodrošina arī dziļās saites, kas lietotājiem atvieglo saišu kopīgošanu, kas viņus novirza tieši uz konkrētu lietojumprogrammas lapu.

Related posts:

Leave a Comment