Dambudziko guru rine chekuita neReact Router v6 simbe kufungidzira nderekuti haisati yanyatsotsigirwa nemabhurawuza ese. Izvi zvinoreva kuti vashandisi vanogona kusangana nematambudziko kana vachiedza kuwana mamwe mapeji kana maficha pamawebhusaiti vachishandisa React Router v6 usimbe kufungidzira. Pamusoro pezvo, kuchine mamwe mabhugi uye nyaya dzekuita dzinoda kugadziriswa dzisati dzashandiswa munzvimbo dzekugadzira. Chekupedzisira, iyo API yehusimbe yekurodha zvinhu neSuspense ichiri mumatanho ekutanga uye ingangoda imwe nguva yekuvandudza kuti ive nechokwadi chekuenderana nemashandisirwo aripo.
import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; const Home = React.lazy(() => import('./Home')); const About = React.lazy(() => import('./About')); const Contact = React.lazy(() => import('./Contact')); function AppRouter() { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Suspense> </Router> ); } export default AppRouter;
1. Kodhi iyi inopinza raibhurari yeReact, pamwe nechikamu cheSuspense kubva kuReact, uye BrowserRouter, Route, uye Shandura zvikamu kubva kune react-router-dom.
2. Inobva yatsanangura zvikamu zvitatu (Kumba, Nezve, Kubata) uchishandisa React's simbe yekurodha ficha kuapinza kubva kune iwo mafaera.
3. Basa reAppRouter rinotsanangurwa iro rinodzorera chikamu cheRouter chine Suspense component ine Switch component mukati mayo.
4. Mukati mechikamu cheChinja mune zvikamu zvitatu zveNzira izvo chimwe nechimwe chinopa chimwe chezvakaunzwa kunze kwenyika kana nzira dzadzo dzichienderana muURL (semuenzaniso, '/' yeKumba).
5. Pakupedzisira, AppRouter inotengeswa kunze kuitira kuti inogona kushandiswa kune imwe nzvimbo mukushandiswa.
Unoshandisa sei usimbe kurodha mune react router v6
v6
Simbe kurodha inzira inoshandiswa kuregeredza kurodha kwezvimwe zvikamu kusvika zvave kudiwa. MuReact Router v6, kusimbe kurodha kunogona kuwanikwa nekushandisa iyo ine simba yekupinda () syntax. Iyi syntax inokutendera kuti upatsanure kodhi yako kuita akawanda masumbu ayo anogona kutakurwa paanoda kana mukufanana. Izvi zvinobatsira kuderedza saizi yekutanga bundle uye kugadzirisa mashandiro. Kuti ushandise husimbe kurodha neReact Router v6, iwe unofanirwa kuputira chikamu chaunoda kuisa husimbe kurodha mune ine simba import() call. Iyo import() call inodzosa vimbiso inozogadzirisa kana chikamu chatakurwa uye chagadzirira kupihwa.
Chii chinonzi suspense uye usimbe pakuita
Susupense muReact Router inzira yekunonotsa kurodha kwenzira kudzamara mamwe mamiriro asangana. Izvi zvinogona kushandiswa kuvandudza mashandiro echishandiso nekurodha nzira chete kana dzichidikanwa. Semuenzaniso, kana mushandisi ari kuenda kune peji rinoda kuvimbiswa, nzira inogona kunonoka kusvika chokwadi chapera.
Simbe kurodha muReact Router inobvumira kuti zvikamu zvitakurwe asynchronously pazvinenge zvichidikanwa pane kurodha zvese kamwechete. Izvi zvinovandudza mashandiro nekurodha zvikamu chete pazvinenge zvichidikanwa uye zvinoderedza huwandu hwe data inoda kuendeswa pane network. Simbe kurodha kunobatsirawo nekutsemura kwekodhi, zvichibvumira kuti maapplication akakura aputswe kuita machunks madiki anogona kutakurwa paunoda.