Isonjululwe: phendula umzila wephepha elilandelayo phezulu

Eyona ngxaki iphambili enxulumene neReact Router's next page top kukuba inokubangela ukuziphatha okungalindelekanga xa uhamba phakathi kwamaphepha. Xa usiya kwiphepha elitsha, isikhangeli siya kuskrola sibuyele phezulu kwiphepha, elinokuba yingozi kubasebenzisi abalindele ukuhlala kwiphepha elinye okanye uskrolele ezantsi. Ukongeza, le ndlela yokuziphatha ayinakulindelwa ngabasebenzisi abasetyenziselwa iipateni zokujonga iwebhu.

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

// Umgca 1: Lo mgca ungenisa i-hook ye-useRouter kwilayibrari ye-react-router-dom.
// Umgca 3: Lo mgca ubhengeza umsebenzi obizwa ngokuba yi-NextPage ebuyisela icandelo le-React.
// Umgca 4: Lo mgca uchaza i-variable ebizwa ngokuba yi-router kwaye inike i-useRouter hook.
// Umgca 6: Lo mgca ubhengeza umsebenzi obizwa ngokuba yiHandleClick obiza indlela yokutyhala ye-router kunye nengxoxo '/iphepha elilandelayo'.
// Imigca 8-11: Le migca ibuyisela i-React component eneqhosha leqhosha eline-onClick prop set to handleClick. Xa ucofa, oku kuyakubiza i-handleClick umsebenzi kwaye ulawule ukuya '/iphepha-elilandelayo'.

Khangela phakathi kwamaphepha

I-React Router lithala leencwadi elinamandla elakhelwe ngaphezulu kwe-React elikunceda ukuba wongeze izikrini ezitsha kwaye uqukuqelele kwisicelo sakho ngokukhawuleza okukhulu, ngelixa ugcina i-URL ihambelana nento eboniswa kwiphepha. I-React Router yenza kube lula ukuhamba phakathi kwamaphepha kwi-React application usebenzisa indlela yayo esekwe kumacandelo. Ngoncedo lwamacandelo anje ngeLinki, i-NavLink, kunye neRedirect, unokwenza amakhonkco okukhangela aguqukayo avumela abasebenzisi ukuba bajikeleze usetyenziso lwakho ngaphandle kokuchwetheza ngesandla kwii-URL. Ukongeza, ungasebenzisa into yembali enikelwe yiReact Router ukuhamba ngokwenkqubo phakathi kwamaphepha ngaphakathi kwesicelo sakho.

Skrolela Phezulu okanye kwiphepha elilandelayo phezulu

I-ScrollTop linqaku kwi-React Router evumela abasebenzisi ukuba baskrole ngokukhawuleza babuyele phezulu ephepheni xa behambahamba phakathi kweendlela ezahlukeneyo. Iluncedo ngakumbi kumaphepha amade anomxholo omninzi, njengoko ivumela abasebenzisi ukuba baxhume ngokukhawuleza babuyele phezulu ngaphandle kokuskrola ngesandla. Umphezulu wephepha elilandelayo yinto efanayo esebenza ngokufanayo kodwa endaweni yokuskrola umva, ikuthatha ngokuthe ngqo kwiphepha elilandelayo xa uhamba phakathi kweendlela. Oku kunokuba luncedo ngakumbi kubasebenzisi abafuna ulwazi oluthile kwiphepha elithile kwaye abafuni ukuskrola kuwo wonke umxholo kwamanye amaphepha ngaphambi kokufika apho. Zombini ezi mpawu zizongezo ezintle ezinceda ukuphucula amava omsebenzisi kwaye zenze ukukhangela kube lula kwaye ngokukhawuleza.