Riješeno: preusmjeravanje s react routerom v6

Glavni problem povezan s preusmjeravanjem s React Routerom v6 je taj što se komponenta ne renderira kada dođe do preusmjeravanja. To znači da bilo koje stanje ili rekviziti povezani s komponentom neće biti ažurirani kada dođe do preusmjeravanja, a bilo kakve promjene tih vrijednosti neće se odraziti na novoj stranici. Osim toga, budući da React Router v6 ne podržava nizove upita, svi parametri upita proslijeđeni u URL-u također će biti izgubljeni tijekom preusmjeravanja.

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

<Redirect to="/home" />

1. Ovaj redak uvozi komponentu Redirect iz biblioteke react-router-dom.

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

Kako mogu preusmjeriti u React Router v6

v6

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

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

Kako mogu preusmjeriti u react routeru v6 nakon prijave

Preusmjeravanje nakon uspješne prijave uobičajena je značajka 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 stvoriti rutu koja provjerava je li korisnik prijavljen i zatim ga preusmjerava u skladu s tim. Na primjer:

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

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

Kako mogu automatski preusmjeriti u React

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 unijeti stazu na koju želite preusmjeriti kao potporu. Također možete proslijediti objekt sa stanjem i/ili parametrima upita ako je potrebno.

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

{isLoggedIn ? : }

U ovom primjeru koristimo booleovu varijablu isLoggedIn (koju bi trebalo postaviti negdje drugdje) kao naš uvjet kada trebamo izvršiti preusmjeravanje. Ako je istina, onda renderiramo našu Home komponentu; inače vršimo preusmjeravanje.

Kako preusmjeriti nakon 5 sekundi u reakciji

Za preusmjeravanje nakon 5 sekundi u React Routeru, možete upotrijebiti funkciju setTimeout() za pozivanje metode history.push() sa željenom rutom kao argumentom.

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