Megoldva: Átirányítás a React Router v6-ban

A React Router v6-ban az átirányítással kapcsolatos fő probléma az, hogy az átirányítások szintaxisa jelentősen megváltozott a korábbi verziókhoz képest. A v6-ban az Átirányítás komponenst kell használni a helyett elemet, és a to prop-ot egy elérési útnév tulajdonságot tartalmazó objektummal kell ellátni. Ezenkívül minden további kelléket, például állapot- vagy lekérdezési paramétereket is tartalmaznia kell ebben az objektumban. Ez megnehezítheti a fejlesztők dolgát, akik hozzászoktak a React Router korábbi verzióinak egyszerűbb szintaxisához.

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áljon { Redirect } innen: 'react-router-dom';
– Ez a sor importálja az Redirect összetevőt a react-router-dom könyvtárból.

2.
– Ez a sor létrehoz egy Route komponenst, amelynek pontos elérési útja a „/old-path”.

3.
– Ez a sor az Átirányítás komponenst használja a „/old-path”-ról a „/new-path”-ra való átirányításhoz.

Hogyan tudok átirányítani a React Router v6-ban

v6

A React Router v6 egy átirányítási összetevőt biztosít, amellyel a felhasználók egyik oldalról a másikra irányíthatók át. Az átirányítás összetevő használatához importálnia kell azt a react-router-dom csomagból. Az Átirányítás komponens két támasztékot vesz igénybe: innen és ide. A „feladó” az aktuális oldal elérési útja, a „hozzá” pedig annak az oldalnak az elérési útja, amelyre a felhasználókat át szeretné irányítani. Ha például a /homepage oldalról a /about címre szeretné átirányítani a felhasználókat, akkor a kód így néz ki:

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

Mi az a react router?

A React Router a React útválasztási könyvtára, amely lehetővé teszi a fejlesztők számára, hogy egyoldalas alkalmazásokat hozzanak létre navigációval és dinamikus, állapotalapú útválasztással. Segít szinkronban tartani a felhasználói felületet az URL-lel, megkönnyítve a felhasználók számára az URL-ek megosztását és könyvjelzők közé helyezését. A React Router olyan hatékony funkciókat is kínál, mint a lusta betöltés, az útvonalvédelem és a helyátmenet-kezelés.

A router típusai reagálnak

A React Router a React útválasztó könyvtára, amely lehetővé teszi a fejlesztők számára, hogy egyoldalas alkalmazásokat hozzanak létre navigációval és URL-útválasztással. Háromféle útválasztót kínál: BrowserRouter, HashRouter és MemoryRouter.

BrowserRouter: Ez az útválasztó a HTML5 előzmény API-t használja, hogy a felhasználói felületet szinkronban tartsa az URL-lel. Akkor használatos, ha valódi URL-eket szeretne használni az alkalmazásban.

HashRouter: Ez az útválasztó az URL hash részét (azaz #) használja, hogy a felhasználói felületet szinkronban tartsa az URL-lel. Akkor használatos, ha nem szeretne valódi URL-eket használni, vagy ha kompatibilitásra van szüksége olyan régebbi böngészőkkel, amelyek nem támogatják a HTML5 előzmény API-t.

MemoryRouter: Ez az útválasztó megőrzi a helyek előzményeit a memóriában, és nem lép kapcsolatba a böngésző címsorával, és nem hoz létre valódi URL-eket. Tesztelési célokra vagy olyan környezetekben hasznos, ahol a valódi URL-ek használata nem kívánatos (pl. szerveroldali megjelenítés).