Kuxazululiwe: phendula irutha ekhasini elilandelayo phezulu

Inkinga enkulu ehlobene nekhasi elilandelayo lekhasi elilandelayo le-React Router ukuthi lingabangela ukuziphatha okungalindelekile lapho uzulazula phakathi kwamakhasi. Uma uzulazulela ekhasini elisha, isiphequluli sizoskrola sibuyele phezulu ekhasini, okungabaxaka abasebenzisi abalindele ukuhlala ekhasini elifanayo noma behle baye phansi ngokuqhubekayo. Ukwengeza, lokhu kuziphatha kungase kungalindelwa abasebenzisi abajwayele amaphethini avamile okuzulazula kuwebhu.

import { useRouter } from 'react-router-dom';

const NextPage = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/next-page');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to next page</button>
    </div>  
  );  
};

// Umugqa 1: Lo mugqa ungenisa ihuku ye-useRouter kusuka kulabhulali ye-react-router-dom.
// Umugqa wesi-3: Lo mugqa umemezela umsebenzi obizwa nge-NextPage obuyisela ingxenye ye-React.
// Umugqa 4: Lo mugqa umemezela okuguquguqukayo okubizwa ngokuthi i-router futhi unikeze i-useRouter hook.
// Umugqa wesi-6: Lo mugqa umemezela umsebenzi obizwa nge-handleClick obiza indlela yokuphusha yomzila ngokuphikisana kokuthi '/ikhasi elilandelayo'.
// Imigqa 8-11: Le migqa ibuyisela ingxenye ethi React enenkinobho enesici se-OnClick set to handleClick. Uma kuchofozwa, lokhu kuzobiza umsebenzi we-HandleClick bese uzulazulela ku-'/ikhasi elilandelayo'.

Zulazula phakathi kwamakhasi

I-React Router iwumtapo womzila onamandla owakhelwe phezu kwe-React ekusiza ukuthi ungeze izikrini ezintsha futhi ugeleze kuhlelo lwakho lokusebenza ngokushesha okukhulu, ngesikhathi ugcina i-URL ivumelanisiwe nalokho okuboniswa ekhasini. I-React Router yenza kube lula ukuzulazula phakathi kwamakhasi kuhlelo lokusebenza lwe-React usebenzisa indlela yayo esekelwe engxenyeni. Ngosizo lwezingxenye ezifana ne-Link, i-NavLink, kanye nokuqondisa kabusha, ungakha izixhumanisi zokuzulazula ezinamandla nezisebenzayo ezivumela abasebenzisi ukuthi bazulazule nohlelo lwakho lokusebenza ngaphandle kokuthayipha ama-URL mathupha. Ukwengeza, ungasebenzisa into yomlando ehlinzekwe yi-React Router ukuze uzulazule ngokuhlelekile phakathi kwamakhasi ngaphakathi kohlelo lwakho lokusebenza.

I-ScrollTop noma ikhasi elilandelayo phezulu

I-ScrollTop isici ku-React Router evumela abasebenzisi ukuthi baskrole ngokushesha babuyele phezulu ekhasini lapho bezulazula phakathi kwemizila eyahlukene. Iwusizo kakhulu kumakhasi amade anokuqukethwe okuningi, njengoba ivumela abasebenzisi ukuthi bagxumele ngokushesha baye phezulu ngaphandle kokuthi baskrole mathupha. Ikhasi elilandelayo eliphezulu liyisici esifanayo esisebenza ngokufanayo kodwa esikhundleni sokuskrola uye phezulu, sikuyisa ngqo ekhasini elilandelayo lapho uzulazula phakathi kwemizila. Lokhu kungaba usizo ikakhulukazi kubasebenzisi abafuna ulwazi oluthile ekhasini elithile futhi abafuni ukuskrola kukho konke okuqukethwe kwamanye amakhasi ngaphambi kokufika lapho. Zombili izici ziyizengezo ezinhle ezisiza ukuthuthukisa ulwazi lomsebenzisi nokwenza ukuzulazula kube lula futhi kusheshe.