Rezolvat: redirecționare cu routerul react v6

Principala problemă legată de redirecționare cu React Router v6 este că componenta nu se redă din nou atunci când are loc o redirecționare. Aceasta înseamnă că orice stare sau elemente de recuzită asociate cu componenta nu vor fi actualizate atunci când are loc redirecționarea și orice modificări aduse acestor valori nu vor fi reflectate în noua pagină. În plus, deoarece React Router v6 nu acceptă șiruri de interogare, orice parametri de interogare trecuți în URL se vor pierde și în timpul unei redirecționări.

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

<Redirect to="/home" />

1. Această linie importă componenta Redirect din biblioteca react-router-dom.

2. Această linie redă o componentă Redirect, care va redirecționa utilizatorul către ruta „/home”.

Cum pot redirecționa în React Router v6

v6

React Router v6 oferă o nouă componentă numită care poate fi folosit pentru a redirecționa utilizatorii de la o pagină la alta. Pentru a-l folosi, trebuie pur și simplu să importați componenta Redirect din pachetul react-router-dom și apoi să o utilizați în configurația rutei. Atunci când un utilizator vizitează calea specificată în prop „de la”, acesta va fi redirecționat către calea specificată în prop „la”. De exemplu:

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

Cum redirecționez în routerul react v6 după conectare

Redirecționarea după o conectare cu succes este o caracteristică comună în aplicațiile web. În React Router v6, puteți utiliza componentă pentru a redirecționa utilizatorul după o conectare cu succes.

Pentru a face acest lucru, va trebui să creați o rută care verifică dacă utilizatorul este autentificat și apoi îl redirecționează în consecință. De exemplu:

{
dacă (este conectat) {
reveni ;
} Else {
reveni ;
}
}} />

În acest exemplu, verificăm dacă utilizatorul este conectat și apoi fie redăm componenta LoginPage, fie îl redirecționăm către /dashboard. De asemenea, puteți trece elemente de recuzită în componenta Redirecționare astfel: Acest lucru vă permite să urmăriți unde se afla utilizatorul înainte de a fi redirecționat.

Cum redirecționez automat în react

React Router oferă o componentă de redirecționare care poate fi utilizată pentru a redirecționa automat utilizatorii atunci când sunt îndeplinite anumite condiții. Pentru a-l folosi, trebuie să treceți în calea către care doriți să redirecționați ca prop. De asemenea, puteți transmite un obiect cu parametrii de stare și/sau de interogare, dacă este necesar.

Pentru a redirecționa automat, va trebui să utilizați componenta într-o componentă Rută și să setați o condiție pentru când ar trebui să aibă loc redirecționarea. De exemplu, dacă doriți să redirecționați utilizatorii de pe pagina de pornire a aplicației dvs. către pagina de conectare după ce aceștia fac clic pe un link, puteți face ceva de genul acesta:

{isLoggedIn ? : }

În acest exemplu, folosim variabila booleană isLoggedIn (care ar trebui setată în altă parte) ca condiție pentru când ar trebui să efectuăm redirecționarea. Dacă este adevărat, atunci redăm componenta noastră Acasă; în caz contrar, efectuăm redirecționarea.

Cum redirecționezi după 5 secunde de reacție

Pentru a redirecționa după 5 secunde în React Router, puteți folosi funcția setTimeout() pentru a apela metoda history.push() cu ruta dorită ca argument.

Exemplu:
import { useHistory } din „react-router-dom”;
const history = useHistory();
setTimeout(() => {
history.push(“/pagină redirecționată”);
}, 5000);