Zgjidhur: Si të ridrejtoni në React Router v6

Problemi kryesor në lidhje me ridrejtimin në React Router v6 është se sintaksa për ridrejtimet ka ndryshuar ndjeshëm nga versionet e mëparshme. Në v6, komponenti Redirect duhet të përdoret në vend të elementi, dhe to prop duhet të pajiset me një objekt që përmban një veçori të emrit të rrugës. Për më tepër, çdo element shtesë si parametrat e gjendjes ose pyetjes duhet gjithashtu të përfshihet në këtë objekt. Kjo mund ta bëjë të vështirë për zhvilluesit që janë mësuar të përdorin sintaksën më të thjeshtë të versioneve të mëparshme të 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. importoni { Redirect } nga 'react-router-dom';
– Kjo linjë importon komponentin Redirect nga biblioteka react-router-dom.

2.
– Kjo linjë krijon një komponent Route me një shteg të saktë të “/old-path”.

3.
– Kjo linjë përdor komponentin Redirect për të ridrejtuar nga “/old-path” në “/new-path”.

Si mund të ridrejtoj në React Router v6

v6

React Router v6 ofron një komponent Redirect që mund të përdoret për të ridrejtuar përdoruesit nga një faqe në tjetrën. Për të përdorur komponentin Redirect, duhet ta importoni atë nga paketa react-router-dom. Komponenti Redirect merr dy mbështetëse: nga dhe tek. Mbështetja "nga" është shtegu i faqes aktuale dhe mbështetja "për" është shtegu i faqes ku dëshironi të ridrejtoni përdoruesit. Për shembull, nëse dëshironi të ridrejtoni përdoruesit nga /homepage në /about, kodi juaj do të dukej kështu:

importoni { Redirect } nga 'react-router-dom';

Cili është ruteri i reagimit?

React Router është një bibliotekë rrugëtimi për React që lejon zhvilluesit të krijojnë aplikacione me një faqe me navigim dhe rrugë dinamike, të bazuar në gjendje. Ndihmon për të mbajtur ndërfaqen në sinkron me URL-në, duke e bërë më të lehtë për përdoruesit të ndajnë dhe të shënojnë URL-të. React Router ofron gjithashtu veçori të fuqishme si ngarkimi dembel, mbrojtja e rrugës dhe trajtimi i tranzicionit të vendndodhjes.

Llojet e ruterit në reagim

React Router është një bibliotekë rrugëtimi për React që lejon zhvilluesit të krijojnë aplikacione me një faqe me navigim dhe rrugëzim URL. Ai ofron tre lloje ruterash: BrowserRouter, HashRouter dhe MemoryRouter.

BrowserRouter: Ky ruter përdor API-në e historisë HTML5 për të mbajtur UI-në tuaj të sinkronizuar me URL-në. Përdoret kur dëshironi të përdorni URL reale në aplikacionin tuaj.

HashRouter: Ky ruter përdor pjesën hash të URL-së (dmth., #) për të mbajtur ndërfaqen tuaj të përdoruesit në sinkron me URL-në. Përdoret kur nuk dëshironi të përdorni URL të vërteta ose kur keni nevojë për përputhshmëri me shfletues të vjetër që nuk mbështesin API të historisë HTML5.

MemoryRouter: Ky ruter ruan një histori vendndodhjesh në memorie dhe nuk ndërvepron me shiritin e adresave të shfletuesit ose nuk krijon URL reale. Ai është i dobishëm për qëllime testimi ose për mjedise ku përdorimi i URL-ve reale nuk është i dëshirueshëm (p.sh. renderimi nga ana e serverit).