Riješeno: preusmjeravanje sa react ruterom v6

Glavni problem vezan za preusmjeravanje s React Routerom v6 je taj što se komponenta ne renderira kada dođe do preusmjeravanja. To znači da bilo koje stanje ili props povezani s komponentom neće biti ažurirani kada dođe do preusmjeravanja, a sve promjene unesene u te vrijednosti neće se odraziti na novoj stranici. Dodatno, budući da React Router v6 ne podržava nizove upita, svi parametri upita proslijeđeni u URL-u također će biti izgubljeni tokom preusmjeravanja.

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

<Redirect to="/home" />

1. Ova linija uvozi komponentu Preusmjeravanje iz biblioteke react-router-dom.

2. Ova linija prikazuje komponentu Redirect, koja će preusmjeriti korisnika na rutu “/home”.

Kako mogu preusmjeriti u React Routeru v6

v6

React Router v6 pruža novu komponentu pod nazivom koji se može koristiti za preusmjeravanje korisnika s jedne stranice na drugu. Da biste ga koristili, jednostavno trebate uvesti komponentu Preusmjeravanje iz paketa react-router-dom i zatim je koristiti u konfiguraciji rute. Kada korisnik posjeti putanju navedenu u 'od' prop, bit će preusmjeren na stazu navedenu u 'do' prop. Na primjer:

import { Preusmjeravanje } iz 'react-router-dom';
} />

Kako da preusmjerim u react ruteru v6 nakon prijave

Preusmjeravanje nakon uspješne prijave je uobičajena karakteristika u web aplikacijama. U React Routeru v6 možete koristiti komponenta za preusmjeravanje korisnika nakon uspješne prijave.

Da biste to učinili, morat ćete kreirati rutu koja provjerava da li je korisnik prijavljen i zatim ga preusmjerava u skladu s tim. Na primjer:

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

U ovom primjeru provjeravamo da li je korisnik prijavljen, a zatim ili renderiramo komponentu LoginPage ili ga preusmjeravamo na /dashboard. Također možete proslijediti props u komponentu Preusmjeravanje na sljedeći način: Ovo vam omogućava da pratite gdje je korisnik bio prije nego što je preusmjeren.

Kako da automatski preusmjerim u reakciji

React Router pruža komponentu Redirect koja se može koristiti za automatsko preusmjeravanje korisnika kada su ispunjeni određeni uvjeti. Da biste ga koristili, morate proći stazu na koju želite preusmjeriti kao prop. Također možete proslijediti objekt sa parametrima stanja i/ili upita ako je potrebno.

Za automatsko preusmjeravanje, morat ćete koristiti komponentu unutar komponente Route i postaviti uvjet kada bi se preusmjeravanje trebalo dogoditi. Na primjer, ako želite preusmjeriti korisnike s početne stranice vaše aplikacije na stranicu za prijavu nakon što kliknu na link, možete učiniti nešto poput ovoga:

{isLoggedIn ? : }

U ovom primjeru koristimo isLoggedIn logičku varijablu (koja bi trebala biti postavljena negdje drugdje) kao naš uvjet kada bismo trebali izvršiti preusmjeravanje. Ako je istina, onda renderiramo našu Home komponentu; u suprotnom, vršimo preusmjeravanje.

Kako preusmjeriti nakon 5 sekundi u reakciji

Za preusmjeravanje nakon 5 sekundi u React Routeru, možete koristiti funkciju setTimeout() da pozovete metod history.push() sa željenom rutom kao argumentom.

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