Rezolvat: Cum se redirecționează în React Router v6

Principala problemă legată de redirecționare în React Router v6 este că sintaxa pentru redirecționări s-a schimbat semnificativ față de versiunile anterioare. În v6, componenta de redirecționare trebuie utilizată în loc de element, iar to prop trebuie să fie furnizat cu un obiect care conține o proprietate pathname. În plus, orice elemente adiționale, cum ar fi parametrii de stare sau de interogare, trebuie să fie incluse în acest obiect. Acest lucru poate face dificilă pentru dezvoltatorii care sunt obișnuiți să folosească sintaxa mai simplă a versiunilor anterioare de React Router.

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. import { Redirect } din 'react-router-dom';
– Această linie importă componenta Redirect din biblioteca react-router-dom.

2.
– Această linie creează o componentă Rută cu o cale exactă „/vechi-cale”.

3.
– Această linie folosește componenta Redirecționare pentru a redirecționa de la „/old-path” la „/new-path”.

Cum pot redirecționa în React Router v6

v6

React Router v6 oferă o componentă de redirecționare care poate fi utilizată pentru a redirecționa utilizatorii de la o pagină la alta. Pentru a utiliza componenta Redirect, trebuie să o importați din pachetul react-router-dom. Componenta de redirecționare are două elemente de recuzită: de la și către. Propul „de la” este calea paginii curente, iar prop „la” este calea paginii către care doriți să redirecționați utilizatorii. De exemplu, dacă doriți să redirecționați utilizatorii de la /homepage la /about, codul dvs. ar arăta astfel:

import { Redirect } din 'react-router-dom';

Ce este routerul de reactie?

React Router este o bibliotecă de rutare pentru React care permite dezvoltatorilor să creeze aplicații cu o singură pagină cu navigare și rutare dinamică, bazată pe stare. Ajută la menținerea UI în sincronizare cu adresa URL, facilitând accesul utilizatorilor și marcarea adreselor URL. React Router oferă, de asemenea, funcții puternice, cum ar fi încărcarea leneșă, protecția rutei și gestionarea tranziției locației.

Tipuri de router în reacție

React Router este o bibliotecă de rutare pentru React care permite dezvoltatorilor să creeze aplicații cu o singură pagină cu navigare și rutare URL. Acesta oferă trei tipuri de routere: BrowserRouter, HashRouter și MemoryRouter.

BrowserRouter: acest router folosește API-ul istoric HTML5 pentru a vă menține interfața de utilizare sincronizată cu adresa URL. Este folosit atunci când doriți să utilizați adrese URL reale în aplicația dvs.

HashRouter: acest router folosește porțiunea hash a adresei URL (adică #) pentru a vă menține interfața de utilizare sincronizată cu adresa URL. Este folosit atunci când nu doriți să utilizați adrese URL reale sau când aveți nevoie de compatibilitate cu browsere mai vechi care nu acceptă API-ul istoric HTML5.

MemoryRouter: acest router păstrează un istoric al locațiilor în memorie și nu interacționează cu bara de adrese a browserului și nu creează adrese URL reale. Este util în scopuri de testare sau pentru medii în care utilizarea URL-urilor reale nu este de dorit (de exemplu, randarea pe server).