Rešeno: preusmeritev z usmerjevalnikom React v6

Glavna težava v zvezi s preusmeritvijo z React Router v6 je, da se komponenta ne upodobi znova, ko pride do preusmeritve. To pomeni, da nobeno stanje ali rekviziti, povezani s komponento, ne bodo posodobljeni, ko pride do preusmeritve, in vse spremembe teh vrednosti ne bodo prikazane na novi strani. Poleg tega, ker React Router v6 ne podpira poizvedbenih nizov, bodo med preusmeritvijo izgubljeni tudi vsi poizvedbeni parametri, posredovani v URL-ju.

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

<Redirect to="/home" />

1. Ta vrstica uvozi komponento Redirect iz knjižnice react-router-dom.

2. Ta vrstica upodobi komponento Redirect, ki bo uporabnika preusmerila na pot »/home«.

Kako lahko preusmerim v React Router v6

v6

React Router v6 ponuja novo komponento, imenovano ki se lahko uporablja za preusmerjanje uporabnikov z ene strani na drugo. Če ga želite uporabiti, morate preprosto uvoziti komponento Redirect iz paketa react-router-dom in jo nato uporabiti v konfiguraciji poti. Ko uporabnik obišče pot, določeno v prop-u 'from', bo preusmerjen na pot, določeno v prop-u 'to'. Na primer:

import { Redirect } from 'react-router-dom';
} />

Kako preusmerim v React Router v6 po prijavi

Preusmerjanje po uspešni prijavi je običajna funkcija spletnih aplikacij. V React Router v6 lahko uporabite komponenta za preusmeritev uporabnika po uspešni prijavi.

Če želite to narediti, boste morali ustvariti pot, ki preverja, ali je uporabnik prijavljen, in ga nato ustrezno preusmeri. Na primer:

{
if (isLoggedIn) {
vrnitev ;
} Else {
vrnitev ;
}
}} />

V tem primeru preverjamo, ali je uporabnik prijavljen, nato pa upodabljamo komponento LoginPage ali ga preusmerjamo na /nadzorno ploščo. Rekvizite lahko posredujete tudi v komponento Redirect takole: To vam omogoča, da spremljate, kje je bil uporabnik, preden je bil preusmerjen.

Kako samodejno preusmerim v React

React Router ponuja komponento Redirect, ki se lahko uporablja za samodejno preusmeritev uporabnikov, ko so izpolnjeni določeni pogoji. Če ga želite uporabiti, morate podati pot, na katero želite preusmeriti, kot prop. Po potrebi lahko posredujete tudi objekt s parametri stanja in/ali poizvedbe.

Za samodejno preusmeritev boste morali uporabiti komponento znotraj komponente Route in nastaviti pogoj, kdaj naj pride do preusmeritve. Na primer, če bi želeli uporabnike preusmeriti z domače strani vaše aplikacije na stran za prijavo, potem ko kliknejo povezavo, bi lahko naredili nekaj takega:

{isLoggedIn? : }

V tem primeru uporabljamo logično spremenljivko isLoggedIn (ki bi jo morali nastaviti nekje drugje) kot pogoj, kdaj naj izvedemo preusmeritev. Če je res, potem upodabljamo našo komponento Home; sicer izvedemo preusmeritev.

Kako preusmeriš po 5 sekundah v reakciji

Če želite preusmeriti po 5 sekundah v React Router, lahko uporabite funkcijo setTimeout(), da pokličete metodo history.push() z želeno potjo kot argumentom.

primer:
import {useHistory} iz “react-router-dom”;
const zgodovina = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000);