Løst: omdirigere med react router v6

Hovedproblemet i forbindelse med omdirigering med React Router v6 er, at komponenten ikke genrenderes, når der opstår en omdirigering. Det betyder, at enhver tilstand eller rekvisitter, der er knyttet til komponenten, ikke vil blive opdateret, når omdirigeringen finder sted, og eventuelle ændringer, der er foretaget i disse værdier, vil ikke blive afspejlet på den nye side. Derudover, da React Router v6 ikke understøtter forespørgselsstrenge, vil alle forespørgselsparametre, der sendes i URL'en, også gå tabt under en omdirigering.

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

<Redirect to="/home" />

1. Denne linje importerer Redirect-komponenten fra react-router-dom-biblioteket.

2. Denne linje gengiver en omdirigeringskomponent, som omdirigerer brugeren til "/hjem"-ruten.

Hvordan kan jeg omdirigere i React Router v6

v6

React Router v6 giver en ny komponent kaldet der kan bruges til at omdirigere brugere fra en side til en anden. For at bruge den skal du blot importere Redirect-komponenten fra react-router-dom-pakken og derefter bruge den i din rutekonfiguration. Når en bruger besøger stien, der er angivet i 'fra'-rekvisiten, vil de blive omdirigeret til den sti, der er angivet i 'til'-rekvisiten. For eksempel:

importer { Redirect } fra 'react-router-dom';
} />

Hvordan omdirigerer jeg i react router v6 efter login

Omdirigering efter et vellykket login er en almindelig funktion i webapplikationer. I React Router v6 kan du bruge komponent til at omdirigere brugeren efter et vellykket login.

For at gøre dette skal du oprette en rute, der kontrollerer, om brugeren er logget ind, og derefter omdirigerer dem i overensstemmelse hermed. For eksempel:

{
if (er logget på) {
afkast ;
} Else {
afkast ;
}
}} />

I dette eksempel tjekker vi, om brugeren er logget ind, og renderer derefter LoginPage-komponenten eller omdirigerer dem til /dashboard. Du kan også overføre rekvisitter til omdirigeringskomponenten sådan: Dette giver dig mulighed for at holde styr på, hvor brugeren var, før de blev omdirigeret.

Hvordan omdirigerer jeg automatisk i reagere

React Router leverer en omdirigeringskomponent, der kan bruges til automatisk at omdirigere brugere, når visse betingelser er opfyldt. For at bruge det, skal du passere i den sti, du vil omdirigere til som en rekvisit. Du kan også sende et objekt ind med tilstands- og/eller forespørgselsparametre, hvis det er nødvendigt.

For automatisk at omdirigere skal du bruge komponenten i en rutekomponent og opsætte en betingelse for, hvornår omdirigeringen skal ske. For eksempel, hvis du vil omdirigere brugere fra startsiden for din applikation til login-siden, efter at de har klikket på et link, kan du gøre noget som dette:

{er logget på? : }

I dette eksempel bruger vi den booleske variabel isLoggedIn (som skal indstilles et andet sted) som vores betingelse for, hvornår vi skal udføre omdirigeringen. Hvis det er sandt, så gengiver vi vores Home-komponent; ellers udfører vi omdirigeringen.

Hvordan omdirigerer du efter 5 sekunders reaktion

For at omdirigere efter 5 sekunder i React Router kan du bruge setTimeout()-funktionen til at kalde history.push()-metoden med den ønskede rute som argument.

Eksempel:
importer { useHistory } fra "react-router-dom";
const historie = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000);