Isonjululwe: uqondise kwakhona nge-react router v6

Ingxaki ephambili enxulumene nokuqondisa ngokutsha ngeReact Router v6 kukuba icandelo alinikezeli kwakhona xa ukuhanjiswa kwakhona kusenzeka. Oku kuthetha ukuba nayiphi na imeko okanye iiprops ezinxulumene necandelo aziyi kuhlaziywa xa ukuhanjiswa kwakhona kusenzeka, kwaye naluphi na utshintsho olwenziwe kuloo maxabiso aluyi kuboniswa kwiphepha elitsha. Ukongeza, kuba iReact Router v6 ayixhasi imitya yombuzo, naziphi na iiparamitha zombuzo ezigqithisiweyo kwi-URL nazo ziya kulahleka ngexesha lokwalathisa kwakhona.

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

<Redirect to="/home" />

1. Lo mgca ungenisa ngaphandle icandelo lokuqondisa ngokutsha kwilayibrari ye-react-router-dom.

2. Lo mgca unika icandelo lokuqondisa ngokutsha, eliya kuthi libuyisele umsebenzisi kwindlela "/yasekhaya".

Ndingayithumela njani kwakhona kwiReact Router v6

v6

I-React Router v6 ibonelela ngecandelo elitsha elibizwa ngokuba enokusetyenziselwa ukwalathisa abasebenzisi ukusuka kwelinye iphepha ukuya kwelinye. Ukuyisebenzisa, kufuneka ungenise ngaphandle icandelo Lokwalathisa kwakhona kwiphakheji ye-react-router-dom kwaye uyisebenzise kuqwalaselo lwendlela yakho. Xa umsebenzisi endwendwela indlela ekhankanyiweyo kwipropu 'esuka', baya kuqondiswa ngokutsha kwindlela echazwe kwipropu 'yoku'. Umzekelo:

rhweba ngaphandle {Redirect } ukusuka 'ku-react-router-dom';
} />

Ndithumela njani kwakhona kwi-router v6 emva kokungena

Ukwalathisa emva kokungena ngempumelelo luphawu oluqhelekileyo kwizicelo zewebhu. KwiReact Router v6, ungasebenzisa i icandelo ukuqondisa kwakhona umsebenzisi emva kokungena ngempumelelo.

Ukwenza oku, kuya kufuneka udale indlela ejonga ukuba umsebenzisi ungenile kwaye emva koko ubaqondise ngokufanelekileyo. Umzekelo:

{
ukuba (isLoggedIn) {
buya ;
} Enye {
buya ;
}
}} />

Kulo mzekelo, sijonga ukuba ngaba umsebenzisi ungenile kwaye emva koko sinikezela ngecandelo le-LoginPage okanye sibaqondise kwakhona kwi-/dashboard. Ungaphinda ugqithise iiprops kwi-Redirect component ngolu hlobo: Oku kukuvumela ukuba ugcine umkhondo wendawo apho umsebenzisi ebekho phambi kokuba akhonjwe ngokutsha.

Ndisabela njani kwakhona ngokuzenzekelayo

I-React Router ibonelela ngecandelo lokuqondisa ngokutsha elinokuthi lisetyenziswe ukuqondisa kwakhona ngokuzenzekelayo abasebenzisi xa iimeko ezithile zifezekisiwe. Ukuyisebenzisa, kufuneka udlule kwindlela ofuna ukuyithumela kwakhona njengeprop. Ungadlula kwinto enesimo kunye/okanye ubuze iparamitha ukuba ziyafuneka.

Ukwalathisa kwakhona ngokuzenzekelayo, kuya kufuneka usebenzise icandelo ngaphakathi kwecandelo leNdlela kwaye usete imeko yokuba uhlengahlengiso kufuneka lwenzeke nini. Umzekelo, ukuba ubufuna ukwalathisa abasebenzisi kwiphepha lasekhaya lesicelo sakho ukuya kwiphepha lokungena emva kokuba becofe ikhonkco, ungenza into enje:

{isLoggedIn ? : }

Kulo mzekelo, sisebenzisa isLoggedIn boolean variable (eya kufuna ukusetwa kwenye indawo) njengemeko yethu xa kufuneka senze ulwalathiso ngokutsha. Ukuba yinyani, ngoko sinikezela ngecandelo lethu leKhaya; kungenjalo, senza ulwalathiso.

Uthumela njani kwakhona emva kwemizuzwana emi-5 ngokusabela

Ukwalathisa kwakhona emva kwemizuzwana emi-5 kwiReact Router, ungasebenzisa i setTimeout() umsebenzi ukubiza imbali.push() indlela kunye nendlela efunekayo njengengxoxo.

Umzekelo:
ngenisa ngaphandle {useHistory } ukusuka kwi-"react-router-dom";
const history = useHistory();
setTimeout(() => {
history.push("/redirectedPage");
I-5000);