Ratkaistu: uudelleenohjaus react-reitittimellä v6

Suurin ongelma, joka liittyy React Router v6:n uudelleenohjaukseen, on, että komponentti ei hahmonnu uudelleen, kun uudelleenohjaus tapahtuu. Tämä tarkoittaa, että mitään komponenttiin liittyvää tilaa tai rekvisiitta ei päivitetä uudelleenohjauksen yhteydessä, eivätkä mitkään näihin arvoihin tehdyt muutokset näy uudella sivulla. Lisäksi koska React Router v6 ei tue kyselymerkkijonoja, myös kaikki URL-osoitteessa välitetyt kyselyparametrit menetetään uudelleenohjauksen aikana.

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

<Redirect to="/home" />

1. Tämä rivi tuo Redirect-komponentin react-router-dom-kirjastosta.

2. Tämä rivi tekee uudelleenohjauskomponentin, joka ohjaa käyttäjän "/home"-reitille.

Kuinka voin ohjata uudelleen React Router v6:ssa

v6

React Router v6 tarjoaa uuden komponentin nimeltä joita voidaan käyttää ohjaamaan käyttäjiä sivulta toiselle. Käyttääksesi sitä sinun tarvitsee vain tuoda Redirect-komponentti react-router-dom-paketista ja käyttää sitä sitten reitin määrityksissä. Kun käyttäjä vierailee "alkaen"-ehdotuksessa määritetyllä polulla, hänet ohjataan "to"-ehdotuksessa määritettyyn polkuun. Esimerkiksi:

tuo { Uudelleenohjaus } osoitteesta 'react-router-dom';
} />

Kuinka ohjaan uudelleen react-reitittimessä v6 kirjautumisen jälkeen

Uudelleenohjaus onnistuneen kirjautumisen jälkeen on yleinen ominaisuus verkkosovelluksissa. React Router v6:ssa voit käyttää komponentti, joka ohjaa käyttäjän onnistuneen kirjautumisen jälkeen.

Tätä varten sinun on luotava reitti, joka tarkistaa, onko käyttäjä kirjautunut sisään, ja ohjaa hänet sitten uudelleen vastaavasti. Esimerkiksi:

{
if (isKirjautunut) {
palata ;
} Else {
palata ;
}
}} />

Tässä esimerkissä tarkistamme, onko käyttäjä kirjautunut sisään, ja sitten joko renderöimme LoginPage-komponentin tai ohjaamme hänet osoitteeseen /dashboard. Voit myös siirtää rekvisiitta uudelleenohjauskomponenttiin seuraavasti: Tämän avulla voit seurata, missä käyttäjä oli ennen kuin hänet ohjattiin uudelleen.

Kuinka ohjaan automaattisesti uudelleen reactissa

React Router tarjoaa uudelleenohjauskomponentin, jota voidaan käyttää käyttäjien automaattiseen uudelleenohjaukseen, kun tietyt ehdot täyttyvät. Jotta voit käyttää sitä, sinun on ohitettava polku, johon haluat ohjata rekvisiitta. Voit myös tarvittaessa välittää objektin tila- ja/tai kyselyparametreilla.

Jos haluat ohjata automaattisesti uudelleen, sinun on käytettävä komponenttia Reitti-komponentissa ja asetettava ehto sille, milloin uudelleenohjauksen pitäisi tapahtua. Jos esimerkiksi haluat ohjata käyttäjät sovelluksesi kotisivulta kirjautumissivulle linkkiä napsautettuaan, voit tehdä jotain näin:

{isKirjautunut sisään? : }

Tässä esimerkissä käytämme isLoggedIn-loogista muuttujaa (joka pitäisi asettaa jonnekin muualle) ehtona sille, milloin meidän tulee suorittaa uudelleenohjaus. Jos se on totta, teemme Home-komponenttimme; muussa tapauksessa suoritamme uudelleenohjauksen.

Kuinka ohjaat uudelleen 5 sekunnin kuluttua reactissa

Jos haluat ohjata uudelleen 5 sekunnin kuluttua React Routerissa, voit käyttää setTimeout()-funktiota kutsumaan historia.push()-metodia halutun reitin argumenttina.

Esimerkiksi:
tuo { useHistory } osoitteesta "react-router-dom";
const historia = useHistory();
setTimeout(() => {
historia.push("/uudelleenohjattu sivu");
}, 5000);