Isonjululwe: Sebenzisa iReact React Router v6 app

Ingxaki ephambili enxulumene nokusebenzisa i-History React Router v6 kukuba ayixhasi i-hash-based routing. Oku kuthetha ukuba zonke ii-URL kufuneka zibe ziindlela ezipheleleyo, ezinokwenza kube nzima ukulawula nokugcina isicelo. Ukongezelela, akukho nkxaso eyakhelwe-ngaphakathi kwiindlela eziguquguqukayo, ezinokuba yingxaki xa udala izicelo eziyinkimbinkimbi kunye namaphepha amaninzi. Okokugqibela, i-History React Router v6 ayiboneleli nayiphi na inkxaso yonikezelo lwecala lomncedisi, olunokuba yimfuneko kwezinye iimeko.

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

// Le khowudi ingenisa ngaphandle iSikhangeli seRouter, Tshintshela, indlela, kunye nezixhobo zeMbali ukusuka kwilayibrari ye-react-router-dom.
// Emva koko yenza umsebenzi obizwa ngokuba yi-App esebenzisa i-useHistory hook ukwenza into yembali.
// Le nto yembali isetyenziswa kumsebenzi obizwa ngokuba yiHandleClick etyhala ungeno olutsha kwisitaki sembali xa ibizwa.
// Umsebenzi we-App emva koko ubuyisela i-JSX ethile ebandakanya iqhosha eline-onClick handler efowunela i-handleClick xa ucofa.
// Ekugqibeleni, kukho icandelo loTshintsho kunye necandelo leNdlela enye ngaphakathi kuyo eyenza icandelo leNewLocation xa indlela yayo ihambelana "/indawo entsha".

Yintoni useHistory

UseHistory yiReact Hook ebonelelwa yiReact Router evumela amacandelo ukuba afikelele kwinto yembali ukuze ahambe ngokwenkqubo. Ingasetyenziselwa ukutyhala iindawo ezintsha kwisitaki sembali, buyisela indawo yangoku, ukuya ngasemva naphambili kwimbali, njl.

Ndiyifumana njani imbali yendlela isabele

KwiReact Router, unokufumana imbali yendlela ngokusebenzisa useHistory hook. Le hook inika ufikelelo kumzekelo wembali onokuwusebenzisa ukuhamba, ukuya emva naphambili kwimbali yosetyenziso lwakho, nokunye. Ukuyisebenzisa, ngenisa nje ihuku kwiReact Router kwaye emva koko uyibize kwicandelo lakho:

ngenisa ngaphandle {useHistory } ukusuka 'kwi-react-router-dom';

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

// Ngoku unokufikelela kwimbali yendlela usebenzisa `imbali` into.

ukubuya (…);
}

Ngaba usabela kwi-router yokusetyenziswa kwembali ye-API

Ewe, iReact Router isebenzisa i-API yeMbali ye-HTML5 ukugcina umkhondo wendawo yangoku kunye nembali yayo. Oku kuvumela iReact Router ukuba ihlaziye iphepha ngaphandle kokuyilayisha kwakhona, isenza ukukhangela ngokukhawuleza nangokutyibilikayo. I-API yeMbali iphinda ivumele ukudibanisa okunzulu, okwenza kube lula kubasebenzisi ukwabelana ngeekhonkco ezithatha ngokuthe ngqo kwiphepha elithile kwisicelo.