Yakagadziriswa: Shandisa Nhoroondo React Router v6 app

Dambudziko guru rine chekuita nekushandisa Nhoroondo React Router v6 nderekuti haitsigire hash-based routing. Izvi zvinoreva kuti ma URL ese anofanirwa kunge ari nzira dzakakwana, izvo zvinogona kuita kuti zviome kubata nekuchengetedza application. Pamusoro pezvo, hapana yakavakirwa-mukati tsigiro yenzira dzakasimba, inogona kuve dambudziko pakugadzira yakaoma maapplication ane akawanda mapeji. Chekupedzisira, Nhoroondo React Router v6 haipe chero tsigiro yeserver-side rendering, izvo zvingave zvakakosha mune dzimwe nguva.

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

// Iyi kodhi inopinza iyo BrowserRouter, Shandura, Nzira, uye shandisaHistory zvikamu kubva kune react-router-dom raibhurari.
// Inobva yagadzira basa rinonzi App rinoshandisa useHistory hook kugadzira chinhu chenhoroondo.
// Ichi chinhu chenhoroondo chinoshandiswa muchinhu chinonzi handleClick chinosundidzira chinopinda panhorondo painodanwa.
// Basa reApp rinobva radzosa imwe JSX iyo inosanganisira bhatani rine onClick handler inodaidza handleClick kana yadzvanywa.
// Pakupedzisira, pane Chinja chikamu chine imwe Route chikamu mukati mayo chinopa iyo NewLocation chikamu kana nzira yacho ichienderana "/new-nzvimbo".

Chii chinonzi useHistory

useHistory iReact Hook yakapihwa neReact Router inobvumira zvikamu kuti zviwane chinhu chenhoroondo kuitira kuti ufambe zvakarongwa. Inogona kushandiswa kusunda nzvimbo nyowani kune iyo nhoroondo stack, kutsiva yazvino nzvimbo, kudzoka nekudzoka munhoroondo, nezvimwe.

Ndinowana sei nhoroondo yenzira mune react

MuReact Router, unogona kuwana nhoroondo yenzira uchishandisa useHistory hook. Hoko iyi inopa mukana wechiitiko chenhoroondo chaunogona kushandisa kufamba, kuenda nekudzoka munhoroondo yeapp yako, nezvimwe. Kuti uishandise, ingo pinza hoko kubva kuReact Router wobva waidaidza muchikamu chako:

pinza {useHistory } kubva 'react-router-dom';

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

// Iye zvino unogona kuwana nhoroondo yenzira kuburikidza ne `nhoroondo` chinhu.

kudzokera (…);
}

Ko react router inoshandisa nhoroondo API

Ehe, React Router inoshandisa iyo HTML5 Nhoroondo API kuchengetedza iyo yazvino nzvimbo uye nhoroondo yayo. Izvi zvinobvumira React Router kuti igadzirise peji pasina kuidzoreredza, ichiita kuti kufamba kuve nekukurumidza uye nyore. Iyo Nhoroondo API inobvumirawo kudzika kwekubatanidza, izvo zvinoita kuti zvive nyore kune vashandisi kugovera zvinongedzo zvinovaendesa zvakananga kune chaiyo peji mune application.