Lahendatud: suunamine react ruuteriga v6

React Router v6 ümbersuunamisega seotud peamine probleem on see, et komponenti ei renderdata ümbersuunamise korral uuesti. See tähendab, et komponendiga seotud olekut ega rekvisiite ümbersuunamise ajal ei värskendata ja nende väärtuste muudatused ei kajastu uuel lehel. Lisaks, kuna React Router v6 ei toeta päringu stringe, lähevad ümbersuunamise ajal ka kõik URL-is edastatud päringuparameetrid.

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

<Redirect to="/home" />

1. See rida impordib ümbersuunamiskomponendi teegist react-router-dom.

2. See rida renderdab ümbersuunamiskomponendi, mis suunab kasutaja marsruudile „/home”.

Kuidas ma saan Reacti ruuteris v6 ümber suunata

v6

React Router v6 pakub uut komponenti nimega mida saab kasutada kasutajate ühelt lehelt teisele suunamiseks. Selle kasutamiseks peate lihtsalt importima komponendi Redirect paketist react-router-dom ja seejärel kasutama seda oma marsruudi konfiguratsioonis. Kui kasutaja külastab rekvisiidis „from” määratud teed, suunatakse ta ümber rekvisiidis „kuni” määratud teele. Näiteks:

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

Kuidas pärast sisselogimist react-ruuteris v6 ümber suunata

Ümbersuunamine pärast edukat sisselogimist on veebirakenduste tavaline funktsioon. React Router v6-s saate kasutada komponent kasutaja ümbersuunamiseks pärast edukat sisselogimist.

Selleks peate looma marsruudi, mis kontrollib, kas kasutaja on sisse logitud ja seejärel suunab nad vastavalt ümber. Näiteks:

{
if (isLoggedIn) {
tagasipöördumine ;
} Else {
tagasipöördumine ;
}
}} />

Selles näites kontrollime, kas kasutaja on sisse logitud, ja seejärel renderdame sisselogimislehe komponendi või suuname ta ümber lehele /dashboard. Samuti saate rekvisiidid ümbersuunamiskomponendile edastada järgmiselt: See võimaldab teil jälgida, kus kasutaja oli enne ümbersuunamist.

Kuidas ma reactis automaatselt ümber suunan

React Router pakub ümbersuunamiskomponenti, mida saab kasutada kasutajate automaatseks ümbersuunamiseks, kui teatud tingimused on täidetud. Selle kasutamiseks peate läbima rekvisiidina tee, kuhu soovite ümber suunata. Vajadusel saate sisestada ka oleku- ja/või päringuparameetritega objekti.

Automaatseks ümbersuunamiseks peate kasutama komponenti Marsruudi komponendis ja seadistama tingimuse, millal ümbersuunamine peaks toimuma. Näiteks kui soovite kasutajad pärast lingil klõpsamist oma rakenduse avalehelt ümber suunata sisselogimislehele, saate teha midagi sellist:

{isLoggedIn ? : }

Selles näites kasutame ümbersuunamise teostamise tingimusena isLoggedIn tõeväärtusmuutujat (mis tuleks määrata kusagil mujal). Kui see on tõsi, siis renderdame oma Kodu komponendi; vastasel juhul teostame ümbersuunamise.

Kuidas suunate ümber 5 sekundi möödudes reactis

React Routeris 5 sekundi pärast ümbersuunamiseks võite kasutada funktsiooni setTimeout() meetodi history.push() kutsumiseks koos argumendina soovitud marsruudiga.

Näide:
importida { useHistory } jaotisest „react-router-dom”;
const ajalugu = useHistory();
setTimeout(() => {
ajalugu.push(“/redirectedPage”);
}, 5000 XNUMX);