Kuxazululiwe: Sebenzisa uhlelo lokusebenza lwe-History React Router v6

Inkinga enkulu ehlobene nokusebenzisa i-History React Router v6 ukuthi ayisekeli umzila osuselwe ku-hash. Lokhu kusho ukuthi wonke ama-URL kufanele abe izindlela eziphelele, ezingenza kube nzima ukuphatha nokugcina uhlelo lokusebenza. Ukwengeza, akukho ukusekelwa okwakhelwe ngaphakathi kwemizila eguquguqukayo, okungaba inkinga lapho udala izinhlelo zokusebenza eziyinkimbinkimbi ezinamakhasi amaningi. Okokugcina, I-History React Router v6 ayinikezi noma yikuphi ukusekelwa kokunikezwa kohlangothi lweseva, okungase kudingeke kwezinye izimo.

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 khodi ingenisa i-BrowserRouter, Shintsha, Umzila, kanye nezingxenye ze-Umlando kusuka kumtapo wezincwadi we-react-router-dom.
// Ibe isidala umsebenzi obizwa nge-App esebenzisa i-useHistory hook ukwakha into yomlando.
// Le nto yomlando isetshenziswa kumsebenzi obizwa nge-handleClick ephusha okufakiwe okusha kusitaki somlando uma sibizwa.
// Umsebenzi wohlelo lokusebenza ube usubuyisela enye i-JSX ehlanganisa inkinobho enesibambi se-OnClick esibiza u-HandleClick uma uchofozwa.
// Ekugcineni, kunengxenye ye-Shintsha enengxenye yomzila eyodwa ngaphakathi kwayo enikeza ingxenye ye-NewLocation lapho indlela yayo ifana “/indawo-entsha”.

Kuyini useHistory

I-useHistory iyi-React Hook enikezwe i-React Router evumela izingxenye ukuthi zifinyelele into yomlando ukuze zizulazule ngokohlelo. Ingasetshenziselwa ukusunduza izindawo ezintsha kusitaki somlando, esikhundleni sendawo yamanje, ukuya emuva naphambili emlandweni, njll.

Ngiwuthola kanjani umlando womzila usabele

Ku-React Router, ungathola umlando womzila ngokusebenzisa ihuku ye-useHistory. Le hook inikeza ukufinyelela kusenzakalo somlando ongasisebenzisa ukuze uzulazule, ukuya emuva naphambili kumlando wohlelo lwakho lokusebenza, nokuningi. Ukuyisebenzisa, vele ungenise ihhuku ku-React Router bese uyibiza engxenyeni yakho:

ngenisa {useHistory } ukusuka 'ku-react-router-dom';

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

// Manje usungakwazi ukufinyelela umlando womzila ngento `yomlando`.

ukubuya (…);
}

Ingabe iyasabela i-router yomlando wokusebenzisa i-API

Yebo, i-React Router isebenzisa i-HTML5 History API ukuze ilandelele indawo yamanje nomlando wayo. Lokhu kuvumela i-React Router ukuthi ibuyekeze ikhasi ngaphandle kokulilayisha kabusha, okwenza ukuzulazula kusheshe futhi kube bushelelezi. I-History API iphinde ivumele ukuxhumanisa okujulile, okwenza kube lula kubasebenzisi ukwabelana ngezixhumanisi eziziyisa ngqo ekhasini elithile kuhlelo lokusebenza.