Išspręsta: peradresuoti naudojant react maršrutizatorių v6

Pagrindinė problema, susijusi su peradresavimu naudojant „React Router v6“, yra ta, kad komponentas neperteikiamas iš naujo, kai įvyksta peradresavimas. Tai reiškia, kad bet kokia su komponentu susijusi būsena ar rekvizitai nebus atnaujinami, kai įvyks peradresavimas, o bet kokie tų verčių pakeitimai neatsispindės naujame puslapyje. Be to, kadangi „React Router v6“ nepalaiko užklausų eilučių, visi URL perduoti užklausos parametrai taip pat bus prarasti peradresuojant.

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

<Redirect to="/home" />

1. Ši eilutė importuoja peradresavimo komponentą iš react-router-dom bibliotekos.

2. Šioje eilutėje pateikiamas peradresavimo komponentas, kuris nukreips vartotoją į „/home“ maršrutą.

Kaip galiu peradresuoti naudojant „React Router v6“.

v6

React Router v6 suteikia naują komponentą, vadinamą kuriuos galima naudoti nukreipiant vartotojus iš vieno puslapio į kitą. Norėdami jį naudoti, tiesiog reikia importuoti Redirect komponentą iš paketo react-router-dom ir naudoti jį maršruto konfigūracijoje. Kai vartotojas apsilanko kelyje, nurodytame pasiūlyme „nuo“, jis bus nukreiptas į kelią, nurodytą pasiūlyme „į“. Pavyzdžiui:

importuoti { Redirect } iš 'react-router-dom';
} />

Kaip peradresuoti į react router v6 po prisijungimo

Peradresavimas po sėkmingo prisijungimo yra įprasta žiniatinklio programų funkcija. React Router v6 galite naudoti komponentas, skirtas nukreipti vartotoją sėkmingai prisijungus.

Norėdami tai padaryti, turėsite sukurti maršrutą, kuris patikrins, ar vartotojas yra prisijungęs, ir atitinkamai peradresuoja. Pavyzdžiui:

{
if (isPrisijungęs) {
grįžti ;
} Else {
grįžti ;
}
}} />

Šiame pavyzdyje mes tikriname, ar vartotojas yra prisijungęs, ir tada pateikiame LoginPage komponentą arba nukreipiame jį į /dashboard. Taip pat galite perduoti rekvizitus į peradresavimo komponentą, pavyzdžiui: Tai leidžia sekti, kur vartotojas buvo prieš jį nukreipiant.

Kaip automatiškai peradresuoti į react

„React Router“ suteikia peradresavimo komponentą, kuris gali būti naudojamas automatiškai peradresuoti vartotojus, kai įvykdomos tam tikros sąlygos. Norėdami jį naudoti, turite pereiti kelią, į kurį norite nukreipti kaip rekvizitus. Jei reikia, taip pat galite perduoti objektą su būsenos ir (arba) užklausos parametrais.

Norėdami automatiškai peradresuoti, turėsite naudoti maršruto komponento komponentą ir nustatyti sąlygą, kada turėtų įvykti peradresavimas. Pavyzdžiui, jei norite nukreipti naudotojus iš pagrindinio programos puslapio į prisijungimo puslapį, kai jie spustelėjo nuorodą, galite padaryti kažką panašaus:

{isPrisijungęs? : }

Šiame pavyzdyje kaip sąlygą, kada turėtume atlikti peradresavimą, naudojame loginį loginį kintamąjį (kuris turėtų būti nustatytas kitur). Jei tai tiesa, mes pateikiame mūsų Home komponentą; kitu atveju atliekame peradresavimą.

Kaip peradresuoti po 5 sekundžių react

Norėdami peradresuoti po 5 sekundžių „React Router“, galite naudoti funkciją setTimeout() ir iškviesti metodą history.push() su norimu maršrutu kaip argumentu.

Pavyzdys:
importuoti { useHistory } iš „react-router-dom“;
const istorija = useHistory();
setTimeout(() => {
history.push(“/redirectedPage“);
}, 5000 XNUMX);