La xaliyay: ka fal celi router bogga xiga

Dhibaatada ugu weyn ee la xiriirta React Router's bogga xiga ee sare waa in ay keeni karto dabeecad lama filaan ah marka aad dhex mareyso boggaga dhexdooda. Markaad u socoto bog cusub, browser-ku wuxuu dib ugu rogman doonaa xagga sare ee bogga, kaas oo u noqon kara dadka isticmaala kuwaas oo sugaya inay ku sii jiraan isla bogga ama hoos u sii dhaadhac. Intaa waxaa dheer, dhaqankan waxaa laga yaabaa in aysan filaneynin isticmaalayaasha loo isticmaalay habab mareegaha caadiga ah.

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

// Laynka 1: Khadkani waxa uu ka soo dejiyaa jilitaanka userRouter maktabadda react-router-dom.
// Sadarka 3: Sadarkani waxa uu ku dhawaaqayaa shaqo loo yaqaan NextPage oo soo celisa qayb falcelin ah.
// Sadarka 4: Sadarkani waxa uu ku dhawaaqayaa doorsoome loo yaqaan router waxana uu ku meeleeyaa hookka isticmaalaha.
// Sadarka 6: Sadarkani waxa uu ku dhawaaqayaa hawl loo yaqaan handleClick kaas oo ugu yeedha habka riixitaanka ee routerka oo leh dood ah '/bogga xiga'.
// Sadarka 8-11: Khadadkani waxay soo celiyaan qayb falcelin ah oo leh curiye badhanka leh oo leh onClick prop u dejiyay inuu gacanta ku dhigo Riix. Marka la gujiyo, tani waxay wici doontaa hawsha gacan-qabsiga oo u gudub '/bogga xiga'.

U dhex mari boggaga dhexdooda

React Router waa maktabad jihdineed awood leh oo laga dul dhisay React taasoo kaa caawinaysa inaad ku darto shaashado cusub oo si cajiib ah ugu qulqula codsigaaga, dhammaan intaad URL ku ilaalinayso waxa lagu soo bandhigay bogga. React Router waxa ay fududaysaa in la dhex maro inta u dhaxaysa boggaga codsiga falcelinta iyada oo la isticmaalayo hab ku salaysan qaybtiisa. Iyada oo la kaashanayo qaybaha ay ka midka yihiin Link, NavLink, iyo Redirect, waxaad abuuri kartaa xiriiriye firfircoon oo is dhexgal ah oo u oggolaanaya isticmaaleyaasha inay ku dhex wareegaan abkaaga adigoon gacanta ku qorin URL-yada. Intaa waxaa dheer, waxaad isticmaali kartaa shayga taariikhda uu bixiyo React Router si aad barnaamij ahaan ugu dhex marato boggaga codsigaga dhexdiisa.

ScrollToTop ama bogga sare ee xiga

ScrollToTop waa muuqaal ku jira React Router kaas oo u oggolaanaya isticmaaleyaasha inay si dhakhso leh ugu rogrogmadaan dusha sare ee bogga marka ay dhex maraan waddooyin kala duwan. Waxay si gaar ah faa'iido u leedahay bogag dhaadheer oo leh waxyaabo badan, maadaama ay u oggolaanayso isticmaalayaasha inay si dhakhso ah dib ugu boodaan xagga sare iyaga oo aan gacanta ku rogin. Bogga xiga ee sare waa sifo la mid ah oo si la mid ah u shaqeysa laakiin halkii aad dib u soo celin lahayd, waxay si toos ah kuugu geyneysaa bogga xiga markaad dhex mareyso waddooyinka. Tani waxay si gaar ah u caawin kartaa isticmaalayaasha kuwaas oo raadinaya macluumaad gaar ah bog gaar ah oo aan rabin inay dhex maraan dhammaan waxyaabaha ku jira boggaga kale ka hor intaanay halkaas gaarin. Labada astaamoodba waa waxyaabo dheeri ah oo gacan ka geysanaya hagaajinta khibradaha isticmaalaha oo ka dhigaya marin-u-socodka fudud oo degdeg ah.