Solucionat: redirecció amb l'encaminador de reacció v6

El principal problema relacionat amb la redirecció amb React Router v6 és que el component no es torna a renderitzar quan es produeix una redirecció. Això vol dir que cap estat o accessoris associats amb el component no s'actualitzaran quan es produeixi la redirecció, i els canvis fets en aquests valors no es reflectiran a la pàgina nova. A més, com que React Router v6 no admet cadenes de consulta, els paràmetres de consulta passats a l'URL també es perdran durant una redirecció.

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

<Redirect to="/home" />

1. Aquesta línia importa el component Redirect de la biblioteca react-router-dom.

2. Aquesta línia representa un component de redirecció, que redirigirà l'usuari a la ruta “/home”.

Com puc redirigir a React Router v6

v6

React Router v6 proporciona un nou component anomenat que es pot utilitzar per redirigir els usuaris d'una pàgina a una altra. Per utilitzar-lo, només heu d'importar el component Redirect del paquet react-router-dom i després utilitzar-lo a la configuració de la ruta. Quan un usuari visiti el camí especificat a la prop "des de", serà redirigit a la ruta especificada a la prop "a". Per exemple:

importar { Redirect } de 'react-router-dom';
} />

Com puc redirigir a l'encaminador de reacció v6 després d'iniciar sessió

La redirecció després d'un inici de sessió satisfactori és una característica comuna a les aplicacions web. A React Router v6, podeu utilitzar el component per redirigir l'usuari després d'una sessió correcta.

Per fer-ho, haureu de crear una ruta que comprove si l'usuari ha iniciat sessió i després el redirigeix ​​en conseqüència. Per exemple:

{
si (està connectat) {
return ;
} Else {
return ;
}
}} />

En aquest exemple, estem comprovant si l'usuari ha iniciat sessió i, a continuació, renderitzar el component LoginPage o redirigir-lo a /dashboard. També podeu passar accessoris al component de redirecció d'aquesta manera: Això us permet fer un seguiment d'on es trobava l'usuari abans de ser redirigit.

Com redirigeixo automàticament a reaccionar

React Router proporciona un component de redirecció que es pot utilitzar per redirigir automàticament els usuaris quan es compleixen determinades condicions. Per utilitzar-lo, heu de passar el camí al qual voleu redirigir com a accessori. També podeu passar un objecte amb paràmetres d'estat i/o consulta si cal.

Per redirigir automàticament, haureu d'utilitzar el component dins d'un component de ruta i establir una condició per quan s'ha de produir la redirecció. Per exemple, si voleu redirigir els usuaris des de la pàgina d'inici de la vostra aplicació a la pàgina d'inici de sessió després de fer clic en un enllaç, podeu fer alguna cosa com això:

{isLoggedIn? : }

En aquest exemple, estem utilitzant la variable booleana isLoggedIn (que s'hauria d'establir en un altre lloc) com a condició per quan hauríem de realitzar la redirecció. Si és cert, representarem el nostre component Inici; en cas contrari, realitzem la redirecció.

Com es redirigeix ​​després de 5 segons de reacció

Per redirigir després de 5 segons a React Router, podeu utilitzar la funció setTimeout() per cridar al mètode history.push() amb la ruta desitjada com a argument.

Exemple:
importar { useHistory } de "react-router-dom";
const history = useHistory();
setTimeout(() => {
history.push(“/Pàgina redirigida”);
}, 5000);