Riješeno: Kako preusmjeriti u React Router v6

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 element, a to prop mora imati objekt koji sadrži svojstvo naziva staze. Dodatno, svi dodatni props kao što su parametri stanja ili upita također moraju biti uključeni u ovaj objekt. To može otežati programerima koji su navikli koristiti 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 } 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).

Povezani postovi:

Ostavite komentar