Yakagadziriswa: react router inotevera peji kumusoro

Dambudziko guru rine chekuita neReact Router's rinotevera peji repamusoro nderekuti rinogona kukonzera maitiro asingatarisirwe kana uchifamba pakati pemapeji. Paunenge uchienda kupeji nyowani, bhurawuza inotsveta ichidzokera kumusoro kwepeji, izvo zvinogona kunetsa kune vashandisi vari kutarisira kugara pane imwechete peji kana kupuruzira pasi mberi. Pamusoro pezvo, maitiro aya anogona kunge asingatarisirwe nevashandisi vanoshandiswa kune echinyakare webhu navigation mapatani.

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

// Mutsara 1: Mutsetse uyu unopinza useRouter hoko kubva kune react-router-dom raibhurari.
// Mutsara 3: Mutsara uyu unozivisa basa rinonzi NextPage rinodzorera React component.
// Mutsara wechi4: Mutsara uyu unozivisa shanduko inonzi router uye unoipa kune useRouter hook.
// Mutsara wechitanhatu: Mutsara uyu unozivisa basa rinonzi handleClick iro rinodaidza nzira yekusundidzira ye router ine nharo ye '/ inotevera-peji'.
// Mitsetse 8-11: Mitsetse iyi inodzorera React component ine bhatani element ine onClick prop set to handleClick. Kana yadzvanywa, izvi zvinodaidza iyo handleClick basa uye famba uchienda ku'/rinotevera-peji'.

Famba pakati pemapeji

React Router iraibhurari ine simba yenzira yakavakirwa pamusoro peReact iyo inokubatsira iwe kuwedzera zviratidziro zvitsva uye inoyerera kune yako application nekukurumidza, zvese uchichengeta iyo URL mukuwirirana nezviri kuratidzwa pane peji. React Router inoita kuti zvive nyore kufamba pakati pemapeji muReact application uchishandisa chikamu-chakavakirwa maitiro. Nerubatsiro rwezvinhu zvakaita seLinganiso, NavLink, uye Redirect, unogona kugadzira anochinja uye anodyidzana ekufambisa zvinongedzo izvo zvinobvumira vashandisi kuti vafambe vachitenderedza app yako pasina kunyora nemaoko maURL. Pamusoro pezvo, iwe unogona kushandisa chinhu chenhoroondo chakapihwa neReact Router kufamba zvine hurongwa pakati pemapeji mukati mekushandisa kwako.

SkrollToTop kana Inotevera peji kumusoro

ScrollToTop chinhu chiri muReact Router chinobvumira vashandisi kuti vakurumidze kukwenya kudzokera kumusoro kwepeji kana uchifamba pakati penzira dzakasiyana. Inonyanya kukosha kumapeji marefu ane zvakawanda zvemukati, sezvo ichibvumira vashandisi kuti vakurumidze kusvetukira kumusoro kumusoro pasina kupuruzira nemaoko. Peji rinotevera kumusoro chinhu chakafanana chinoshanda zvakafanana asi pachinzvimbo chekukwenya kumashure, zvinokutora iwe zvakananga kune rinotevera peji paunenge uchifamba pakati penzira. Izvi zvinogona kunyanya kubatsira kune vashandisi vari kutsvaga ruzivo rwakananga pane imwe peji uye vasingade kupururudza mukati mezvese zvirimo pane mamwe mapeji vasati vasvika ikoko. Iwo maviri maficha ari ekuwedzera makuru anobatsira kuvandudza ruzivo rwemushandisi uye kuita kuti kufamba kuve nyore uye nekukurumidza.