Ixazululiwe: Ungaqondisa kanjani kabusha ku-React Router v6

Inkinga enkulu ehlobene nokuqondisa kabusha ku-React Router v6 ukuthi i-syntax yokuqondisa kabusha ishintshe kakhulu ezinguqulweni ezedlule. Ku-v6, ingxenye yokuqondisa kabusha kufanele isetshenziswe esikhundleni se- ingxenye, futhi i-to prop kufanele ihlinzekwe ngento equkethe indawo yegama lendlela. Ukwengeza, noma yiziphi izisetshenziswa ezengeziwe ezifana nemingcele yesimo noma yombuzo kumele nazo zifakwe kule nto. Lokhu kungenza kube nzima konjiniyela abajwayele ukusebenzisa i-syntax elula yezinguqulo zangaphambili ze-React Router.

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. ngenisa { Qondisa kabusha } kusuka 'ku-react-router-dom';
- Lo mugqa ungenisa ingxenye ethi Ukuqondisa Kabusha kumtapo wezincwadi we-react-router-dom.

2.
- Lo mugqa udala ingxenye yoMzila enendlela eqondile ethi "/indlela endala".

3.
- Lo mugqa usebenzisa ingxenye ethi Ukuqondisa Kabusha ukuze uqondise kabusha ukusuka "/endleleni endala" kuya "/endleleni entsha".

Ngingaqondisa kanjani kabusha ku-React Router v6

v6

I-React Router v6 inikeza ingxenye yokuqondisa kabusha engasetshenziswa ukuqondisa kabusha abasebenzisi ukusuka ekhasini elilodwa ukuya kwelinye. Ukuze usebenzise ingxenye ethi Ukuqondisa Kabusha, udinga ukuyingenisa isuka kuphakheji ye-react-router-dom. Ingxenye yokuqondisa kabusha ithatha izingxenye ezimbili: ukusuka nokuya. I-prop ethi "kusuka" yindlela yekhasi lamanje, futhi iphrophu ethi "kuya" yindlela yekhasi ofuna ukuqondisa kabusha abasebenzisi kulo. Isibonelo, uma ubufuna ukuqondisa kabusha abasebenzisi ukusuka ku/ikhasi lasekhaya kuye ku/mayelana, ikhodi yakho izobukeka kanje:

ngenisa okuthi { Qondisa kabusha } kusuka 'ku-react-router-dom';

Ithini irutha esabelayo?

I-React Router iwumtapo womzila we-React ovumela abathuthukisi ukuthi bakhe izinhlelo zokusebenza zekhasi elilodwa ezinokuzulazula kanye nemizila eguquguqukayo, esekelwe kuhulumeni. Kuyasiza ukugcina i-UI ivumelana ne-URL, okwenza kube lula kubasebenzisi ukwabelana nokubekisa ama-URL. I-React Router iphinda inikeze izici ezinamandla njengokulayisha okuvilaphayo, ukuvikela umzila, nokuphatha ukuguqulwa kwendawo.

Izinhlobo zamarutha ziyasabela

I-React Router iwumtapo womzila we-React ovumela abathuthukisi ukuthi bakhe izinhlelo zokusebenza zekhasi elilodwa ngokuzulazula kanye nemizila ye-URL. Ihlinzeka ngezinhlobo ezintathu zamarutha: BrowserRouter, HashRouter, kanye MemoryRouter.

I-BrowserRouter: Le router isebenzisa i-API yomlando we-HTML5 ukuze igcine i-UI yakho ivunyelaniswa ne-URL. Isetshenziswa uma ufuna ukusebenzisa ama-URL wangempela kuhlelo lwakho lokusebenza.

I-HashRouter: Le router isebenzisa ingxenye ye-hash ye-URL (okungukuthi, #) ukuze igcine i-UI yakho ivunyelaniswe ne-URL. Isetshenziswa uma ungafuni ukusebenzisa ama-URL wangempela noma uma udinga ukusebenzisana neziphequluli ezindala ezingasekeli i-API yomlando we-HTML5.

I-MemoryRouter: Le router igcina umlando wezindawo enkumbulweni futhi ayihlangani nebha yekheli lesiphequluli noma idale ama-URL wangempela. Iwusizo ngezinjongo zokuhlola noma ezindaweni lapho ukusebenzisa ama-URL wangempela kungafiseleki khona (isb, ukunikezwa kohlangothi lweseva).