Ixazululiwe: qondisa kabusha nge-react router v6

Inkinga enkulu ehlobene nokuqondisa kabusha nge-React Router v6 ukuthi ingxenye ayinikezeli kabusha lapho ukuqondisa kabusha kwenzeka. Lokhu kusho ukuthi noma isiphi isimo noma ama-props ahlobene nengxenye ngeke abuyekezwe lapho ukuqondisa kabusha kwenzeka, futhi noma yiziphi izinguquko ezenziwe kulawo manani ngeke ziboniswe ekhasini elisha. Ukwengeza, njengoba i-React Router v6 ingasekeli iyunithi yezinhlamvu zemibuzo, noma imaphi amapharamitha ombuzo adluliswe ku-URL nawo azolahleka ngesikhathi sokuqondisa kabusha.

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. Lo mugqa ungenisa ingxenye ethi Ukuqondisa Kabusha kusuka kulabhulali ye-react-router-dom.

2. Lo mugqa unikeza ingxenye ethi Ukuqondisa Kabusha, ezoqondisa kabusha umsebenzisi emzileni "/wasekhaya".

Ngingaqondisa kanjani kabusha ku-React Router v6

v6

I-React Router v6 inikeza ingxenye entsha ebizwa ngokuthi engasetshenziswa ukuqondisa kabusha abasebenzisi ukusuka ekhasini elilodwa ukuya kwelinye. Ukuyisebenzisa, udinga nje ukungenisa ingxenye ethi Ukuqondisa Kabusha kusuka kuphakheji ye-react-router-dom bese uyisebenzisa ekucushweni komzila wakho. Uma umsebenzisi evakashela indlela ecaciswe ku-'from' prop, uzoqondiswa kabusha endleleni ecaciswe ku-'to' prop. Ngokwesibonelo:

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

Ngiqondisa kanjani kabusha ku-react router v6 ngemuva kokungena ngemvume

Ukuqondisa kabusha ngemva kokungena ngemvume ngempumelelo kuyisici esivamile ezinhlelweni zokusebenza zewebhu. Ku-React Router v6, ungasebenzisa i ingxenye yokuqondisa kabusha umsebenzisi ngemva kokungena ngemvume ngempumelelo.

Ukuze wenze lokhu, uzodinga ukudala umzila ohlola ukuthi umsebenzisi ungene ngemvume yini bese umqondisa kabusha ngokufanele. Ngokwesibonelo:

{
uma (isLoggedIn) {
ukubuya ;
} enye {
ukubuya ;
}
}} />

Kulesi sibonelo, sibheka ukuthi umsebenzisi ungene ngemvume yini bese sinikeza ingxenye ye-LoginPage noma siyiqondise kabusha kokuthi/ideshibhodi. Ungakwazi futhi ukudlulisa ama-props engxenyeni ethi Ukuqondisa Kabusha kanje: Lokhu kukuvumela ukuthi ulandelele ukuthi umsebenzisi ubekuphi ngaphambi kokuthi aqondiswe kabusha.

Ngiqondisa kanjani kabusha ngokuzenzakalelayo ekusabeleni

I-React Router inikeza ingxenye ethi Ukuqondisa Kabusha engasetshenziswa ukuqondisa kabusha abasebenzisi ngokuzenzakalelayo lapho izimo ezithile zifinyelelwa. Ukuze uyisebenzise, ​​kufanele udlule endleleni ofuna ukuyiqondisa kabusha njenge-prop. Ungaphinda udlule entweni enemibandela yesimo kanye/noma yokubuza uma kudingeka.

Ukuze uqondise kabusha ngokuzenzakalelayo, uzodinga ukusebenzisa ingxenye engaphakathi kwengxenye Yomzila futhi usethe umbandela wokuthi ukuqondisa kabusha kufanele kwenzeke nini. Isibonelo, uma ubufuna ukuqondisa kabusha abasebenzisi kusuka ekhasini lasekhaya lohlelo lwakho lokusebenza ukuya ekhasini lokungena ngemvume ngemuva kokuchofoza isixhumanisi, ungenza into efana nale:

{isLoggedIn ? : }

Kulesi sibonelo, sisebenzisa i-isLoggedIn boolean variable (ezodinga ukusethwa kwenye indawo) njengesimo sethu sokuthi kufanele senze nini ukuqondisa kabusha. Uma kuyiqiniso, khona-ke sinikeza ingxenye Yekhaya lethu; uma kungenjalo, senza ukuqondisa kabusha.

Uqondisa kanjani kabusha ngemva kwemizuzwana emi-5 yokusabela

Ukuze uqondise kabusha ngemva kwemizuzwana emi-5 ku-React Router, ungasebenzisa umsebenzi we-setTimeout() ukuze ushayele indlela ye-history.push() ngomzila owufunayo njengengxabano.

Isibonelo:
ngenisa {useHistory } ukusuka ku-"react-router-dom";
const history = useHistory();
setTimeout(() => {
history.push("/redirectedPage");
}, 5000);