Løst: omdirigere med react router v6

Hovedproblemet knyttet til omdirigering med React Router v6 er at komponenten ikke gjengis på nytt når en omdirigering oppstår. Dette betyr at noen tilstand eller rekvisitter knyttet til komponenten ikke vil bli oppdatert når omdirigeringen skjer, og eventuelle endringer som gjøres i disse verdiene vil ikke bli reflektert på den nye siden. I tillegg, siden React Router v6 ikke støtter spørringsstrenger, vil eventuelle spørringsparametere som sendes i URL-en også gå tapt under en omdirigering.

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

<Redirect to="/home" />

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

2. Denne linjen gjengir en omdirigeringskomponent, som vil omdirigere brukeren til "/hjem"-ruten.

Hvordan kan jeg omdirigere i React Router v6

v6

React Router v6 gir en ny komponent kalt som kan brukes til å omdirigere brukere fra en side til en annen. For å bruke den trenger du ganske enkelt å importere Redirect-komponenten fra react-router-dom-pakken og deretter bruke den i rutekonfigurasjonen. Når en bruker besøker banen spesifisert i 'fra'-propp, vil de bli omdirigert til banen spesifisert i 'til'-propp. For eksempel:

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

Hvordan omdirigerer jeg i react router v6 etter pålogging

Omdirigering etter vellykket pålogging er en vanlig funksjon i nettapplikasjoner. I React Router v6 kan du bruke komponent for å omdirigere brukeren etter vellykket pålogging.

For å gjøre dette, må du opprette en rute som sjekker om brukeren er pålogget og deretter omdirigerer dem deretter. For eksempel:

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

I dette eksemplet sjekker vi om brukeren er pålogget, og deretter gjengir vi LoginPage-komponenten eller omdirigerer dem til /dashboard. Du kan også sende rekvisitter til Redirect-komponenten slik: Dette lar deg holde styr på hvor brukeren var før de ble omdirigert.

Hvordan omdirigerer jeg automatisk i reagere

React Router tilbyr en omdirigeringskomponent som kan brukes til å omdirigere brukere automatisk når visse betingelser er oppfylt. For å bruke det, må du passere i banen du vil omdirigere til som en rekvisitt. Du kan også sende inn et objekt med tilstands- og/eller spørringsparametere om nødvendig.

For å omdirigere automatisk, må du bruke komponenten i en rutekomponent og sette opp en betingelse for når omdirigeringen skal skje. Hvis du for eksempel ønsker å omdirigere brukere fra startsiden til programmet til påloggingssiden etter at de har klikket på en lenke, kan du gjøre noe slikt:

{er pålogget? : }

I dette eksemplet bruker vi den boolske variabelen isLoggedIn (som må settes et annet sted) som betingelse for når vi skal utføre omdirigeringen. Hvis det er sant, gjengir vi Hjem-komponenten vår; ellers utfører vi omdirigeringen.

Hvordan omdirigerer du etter 5 sekunder i reaksjon

For å omdirigere etter 5 sekunder i React Router, kan du bruke funksjonen setTimeout() til å kalle opp history.push()-metoden med ønsket rute som argument.

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