Dambudziko guru rine chekuita neReact Router simbe kurodha nderekuti inogona kukonzera nyaya dzekuita kana ikasaitwa nemazvo. Simbe kurodha kunogona kuwedzera peji rekutanga kurodha nguva, sezvo kodhi yechikamu chimwe nechimwe inoda kutakurwa zvakasiyana. Pamusoro pezvo, kana chikamu chikasashandiswa kazhinji, chinogona kusambotakurwa zvachose, zvichikonzera kutambisa zviwanikwa. Chekupedzisira, pane zvingangoita nyaya dzekuenderana nemabhurawuza ekare asingatsigire kurodha.
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 App() {
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 App;
1. import React, {Suspense } kubva 'react';
// Mutsetse uyu unopinza raibhurari yeReact uye chikamu cheSuspense kubva kuraibhurari yeReact.
2. import {BrowserRouter as Router, Route, Switch } kubva 'react-router-dom';
// Mutsetse uyu unopinza kunze BrowserRouter, Route uye Shandura zvikamu kubva kune react-router-dom raibhurari.
3. const Musha = React.lazy(() => import('./Home'));
// Mutsetse uyu unogadzira inogarodaidzwa Kumba iyo inoshandisa simbe yekurodha ficha yeReact kupinza zvine simba chinhu chinodaidzwa kuti Kumba kubva mufaira riri mudhairekitori rimwechete nefaira iri (chikamu cheApp).
4. const About = React.lazy(() => import('./About'));
// Mutsetse uyu unogadzira inogara ichinzi About iyo inoshandisa usimbe kurodha kupinza zvine simba chikamu chinodaidzwa kuti About kubva mufaira riri mudhairekitori rimwechete nefaira iri (chikamu cheApp).
const Contact = React.lazy(() => import('./Contact')); // Mutsara uyu unogadzira inogara ichinzi Contact iyo inoshandisa usimbe kurodha kupinza zvine simba chikamu chinodaidzwa kuti Contact kubva mufaira riri mudhairekitori rimwechete nefaira iri (chikamu cheApp).
5. basa App () {kudzoka ( // Iri ibasa remuseve rinodzosera JSX kodhi yakaputirwa muRouter tag iyo inotengeswa kunze kwenyika kare
6.Loading ...
}> //Iyi Suspense tag inoputira nzira dzedu dzese ne fallback props yeLoading… kana chero nzira inotora nguva kurodha.
7. // Chinja tag ichaita shuwa kuti nzira imwe chete inopihwa kamwechete
8. //Iyi Nzira ichapa Chikamu Chepamba kana nzira chaiyo "/" ichienderana
9. // Iyi Nzira ichapa Nezve Chikamu kana nzira "/ nezve" ichienderana
10. // Iyi Route ichapa Bata Chikamu kana nzira "/contact" ichienderana ) } Export default App; // Pakupedzisira tinovhara ma tag ese uye tinotumira kunze app yedu
Simbe mutoro dambudziko
Simbe kurodha inzira inoshandiswa kunonotsa kurodha kwezvimwe zvikamu kusvika zvave kudiwa. Izvi zvinogona kubatsira kuvandudza mashandiro echikumbiro nekungoisa izvo zvinodiwa chero nguva. Nekudaro, izvi zvinogona kuve dambudziko kana uchishandisa React Router, sezvo isingatsigire simbe kurodha kunze kwebhokisi. Kuti ushande kutenderedza nyaya iyi, vanogadzira vanofanirwa kugadzirisa nemaoko nzira dzavo kuti vagone kurodha. Izvi zvinogona kusanganisira kumisikidza zvine simba zvekunze uye kupatsanurwa kwekodhi, izvo zvinogona kuve zvakaoma uye zvinopedza nguva mabasa. Pamusoro pezvo, mamwe maraibhurari akadai seReact Loadable angangoda kushandiswa kuitira kuti aite nemazvo usimbe kurodha neReact Router.
Chii chinonzi React simbe mutoro
React simbe mutoro chinhu cheReact Router chinobvumira kurodha zvinhu pazvinenge zvichidiwa. Izvi zvinoreva kuti panzvimbo yekutakura zvinhu zvose panguva imwe chete, zvikamu zvinodiwa chete zvinotakurwa kana zvichidiwa. Izvi zvinobatsira kuderedza nguva yekutanga yekutakura peji uye kugadzirisa kushanda. Inobvumirawo kurongeka kwekodhi iri nani uye kupatsanurwa kwekunetseka, sezvo chikamu chimwe nechimwe chinogona kutakurwa chakazvimirira.
Ndinoshandisa sei React simbe pane yangu router
React simbe chinhu cheReact chinokutendera kuti utore zvinhu zvine simba. Izvi zvinoreva kuti pane kurodha zvinhu zvese kumberi, unogona kuzvitakura sezvinodiwa. Izvi zvinogona kubatsira kukwenenzvera kuita mumashandisi makuru.
Kuti ushandise React simbe pane yako router muReact Router, iwe unofanirwa kuputira chikamu chaunoda kuita husimbe-kutakura mune inosimba yekufona kufona. Semuyenzaniso:
const MyComponent = React.lazy(() => import('./MyComponent'));
Zvino, kana uchitsanangura nzira dzako, ingopfuudza iyo MyComponent chikamu muchikamu cheNzira seizvi:
Izvi zvinokonzeresa React Router kurodha zvine simba chikamu cheMyComponent kana uchifamba uchienda nenzira iyoyo.
