Riješeno: Kako preusmjeriti u React Routeru v6

Glavni problem vezan za preusmjeravanje u React Routeru v6 je taj što se sintaksa za preusmjeravanja značajno promijenila u odnosu na prethodne verzije. U v6, komponenta Preusmjeravanje se mora koristiti umjesto element, a to prop mora biti opskrbljen objektom koji sadrži svojstvo pathname. Dodatno, svi dodatni rekviziti kao što su parametri stanja ili upita također moraju biti uključeni u ovaj objekt. Ovo može otežati programerima koji su navikli da koriste jednostavniju sintaksu ranijih verzija React Routera.

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 } iz 'react-router-dom';
– Ova linija uvozi komponentu Preusmjeravanje iz biblioteke react-router-dom.

2.
– Ova linija kreira komponentu rute s tačnom putanjom “/old-path”.

3.
– Ova linija koristi komponentu Preusmjeravanje za preusmjeravanje sa “/old-path” na “/new-path”.

Kako mogu preusmjeriti u React Routeru v6

v6

React Router v6 pruža komponentu Redirect koja se može koristiti za preusmjeravanje korisnika s jedne stranice na drugu. Da biste koristili komponentu Preusmjeravanje, morate je uvesti iz paketa react-router-dom. Komponenta Preusmjeravanje uzima dva propsa: od i do. “Od” prop je putanja trenutne stranice, a “do” prop je putanja stranice na koju želite preusmjeriti korisnike. Na primjer, ako želite preusmjeriti korisnike sa /homepage na /about, vaš kod bi izgledao ovako:

import { Preusmjeravanje } iz 'react-router-dom';

Šta je react ruter?

React Router je biblioteka rutiranja za React koja omogućava programerima da kreiraju aplikacije na jednoj stranici sa navigacijom i dinamičkim rutiranjem zasnovanim na stanju. Pomaže da se korisnički interfejs sinhronizuje sa URL-om, što korisnicima olakšava dijeljenje i označavanje URL-ova. React Router također nudi moćne funkcije kao što su lijeno učitavanje, zaštita rute i rukovanje tranzicijom lokacije.

Vrste rutera u reakciji

React Router je biblioteka rutiranja za React koja omogućava programerima da kreiraju aplikacije na jednoj stranici s navigacijom i URL usmjeravanjem. Pruža tri tipa rutera: BrowserRouter, HashRouter i MemoryRouter.

BrowserRouter: Ovaj ruter koristi HTML5 historijski API kako bi vaš korisnički interfejs bio sinhronizovan sa URL-om. Koristi se kada želite da koristite prave URL-ove u svojoj aplikaciji.

HashRouter: Ovaj ruter koristi hash dio URL-a (tj. #) da bi vaš korisnički interfejs bio sinhronizovan sa URL-om. Koristi se kada ne želite da koristite prave URL-ove ili kada vam je potrebna kompatibilnost sa starijim pretraživačima koji ne podržavaju HTML5 historijski API.

MemoryRouter: Ovaj ruter čuva historiju lokacija u memoriji i ne stupa u interakciju s adresnom trakom pretraživača niti stvara stvarne URL adrese. Koristan je u svrhe testiranja ili za okruženja u kojima korištenje stvarnih URL-ova nije poželjno (npr. renderiranje na strani servera).