Vyriešené: presmerovanie pomocou smerovača reakcie v6

Hlavným problémom súvisiacim s presmerovaním s React Router v6 je to, že komponent sa pri presmerovaní znova nevykreslí. To znamená, že akýkoľvek stav alebo rekvizity spojené s komponentom nebudú aktualizované, keď dôjde k presmerovaniu, a akékoľvek zmeny vykonané v týchto hodnotách sa na novej stránke neprejavia. Navyše, keďže React Router v6 nepodporuje reťazce dotazov, počas presmerovania sa stratia aj všetky parametre dotazu odovzdané v URL.

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

<Redirect to="/home" />

1. Tento riadok importuje komponent Redirect z knižnice respond-router-dom.

2. Tento riadok vykresľuje komponent Redirect, ktorý presmeruje používateľa na cestu „/home“.

Ako môžem presmerovať v React Router v6

v6

React Router v6 poskytuje nový komponent tzv ktoré možno použiť na presmerovanie používateľov z jednej stránky na druhú. Ak ho chcete použiť, musíte jednoducho importovať komponent Redirect z balíka respond-router-dom a potom ho použiť v konfigurácii vašej trasy. Keď používateľ navštívi cestu špecifikovanú v rekvizite „od“, bude presmerovaný na cestu špecifikovanú v rekvizite „do“. Napríklad:

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

Ako sa po prihlásení presmerujem na router v6

Presmerovanie po úspešnom prihlásení je bežnou funkciou webových aplikácií. V React Router v6 môžete použiť komponent na presmerovanie užívateľa po úspešnom prihlásení.

Ak to chcete urobiť, budete musieť vytvoriť trasu, ktorá skontroluje, či je používateľ prihlásený, a následne ho podľa toho presmeruje. Napríklad:

{
if (isLoggedIn) {
návrat ;
} Else {
návrat ;
}
}} />

V tomto príklade kontrolujeme, či je používateľ prihlásený, a potom buď vykreslíme komponent LoginPage, alebo ho presmerujeme na /dashboard. Môžete tiež odovzdať rekvizity do komponentu Redirect takto: To vám umožní sledovať, kde sa používateľ nachádzal predtým, ako bol presmerovaný.

Ako sa automaticky presmerujem v reakcii

React Router poskytuje komponent Redirect, ktorý možno použiť na automatické presmerovanie používateľov, keď sú splnené určité podmienky. Ak ho chcete použiť, musíte zadať cestu, na ktorú chcete presmerovať ako rekvizitu. V prípade potreby môžete odovzdať aj objekt s parametrami stavu a/alebo dotazu.

Na automatické presmerovanie budete musieť použiť komponent v rámci komponentu Route a nastaviť podmienku, kedy má presmerovanie nastať. Ak by ste napríklad chceli presmerovať používateľov z domovskej stránky vašej aplikácie na prihlasovaciu stránku po kliknutí na odkaz, môžete urobiť niečo takéto:

{sLoggedIn ? : }

V tomto príklade používame boolovskú premennú isLoggedIn (ktorú by bolo potrebné nastaviť niekde inde) ako podmienku, kedy by sme mali vykonať presmerovanie. Ak je to pravda, potom vykreslíme náš komponent Home; v opačnom prípade vykonáme presmerovanie.

Ako presmerujete po 5 sekundách reakcie

Na presmerovanie po 5 sekundách v React Router môžete použiť funkciu setTimeout() na zavolanie metódy history.push() s požadovanou cestou ako argumentom.

Príklad:
import { useHistory } z “react-router-dom”;
const history = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000 XNUMX);