Glavni problem povezan s preusmjeravanjem u React Routeru v6 je taj što se sintaksa za preusmjeravanja značajno promijenila u odnosu na prethodne verzije. U v6, komponenta Redirect mora se koristiti umjesto
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 } from 'react-router-dom';
– Ovaj redak uvozi komponentu Redirect iz biblioteke react-router-dom.
2.
– Ovaj redak stvara komponentu rute s točnom putanjom "/old-path".
3.
– Ovaj redak koristi komponentu Redirect za preusmjeravanje s “/old-path” na “/new-path”.
Kako mogu preusmjeriti u React Router 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 Redirect, morate je uvesti iz paketa react-router-dom. Komponenta Preusmjeravanje ima dva rekvizita: od i do. Prop "from" je staza trenutne stranice, a prop "to" je staza stranice na koju želite preusmjeriti korisnike. Na primjer, ako želite preusmjeriti korisnike s /homepage na /about, vaš bi kôd izgledao ovako:
import { Redirect } from 'react-router-dom';
Što je React router?
React Router je biblioteka za usmjeravanje za React koja programerima omogućuje stvaranje jednostraničkih aplikacija s navigacijom i dinamičkim usmjeravanjem temeljenim na stanju. Pomaže u sinkronizaciji korisničkog sučelja s URL-om, što korisnicima olakšava dijeljenje i označavanje URL-ova. React Router također nudi snažne značajke kao što su odgođeno učitavanje, zaštita rute i upravljanje prijelazom lokacije.
Vrste usmjerivača u reakciji
React Router je biblioteka usmjeravanja za React koja programerima omogućuje stvaranje jednostraničkih aplikacija s navigacijom i URL usmjeravanjem. Omogućuje tri vrste usmjerivača: BrowserRouter, HashRouter i MemoryRouter.
BrowserRouter: Ovaj usmjerivač koristi API povijesti HTML5 kako bi vaše korisničko sučelje bilo sinkronizirano s URL-om. Koristi se kada želite koristiti prave URL-ove u svojoj aplikaciji.
HashRouter: Ovaj usmjerivač koristi hash dio URL-a (tj. #) kako bi vaše korisničko sučelje bilo sinkronizirano s URL-om. Koristi se kada ne želite koristiti prave URL-ove ili kada vam je potrebna kompatibilnost sa starijim preglednicima koji ne podržavaju HTML5 history API.
MemoryRouter: Ovaj usmjerivač čuva povijest lokacija u memoriji i ne komunicira s adresnom trakom preglednika niti stvara prave URL-ove. Korisno je za svrhe testiranja ili za okruženja u kojima korištenje pravih URL-ova nije poželjno (npr. iscrtavanje na strani poslužitelja).