Išspręsta: kaip peradresuoti naudojant React Router v6

Pagrindinė problema, susijusi su peradresavimu React Router v6, yra ta, kad peradresavimų sintaksė labai pasikeitė, palyginti su ankstesnėmis versijomis. 6 versijoje vietoj elementas, o į prop turi būti pateiktas objektas, turintis kelio pavadinimo ypatybę. Be to, į šį objektą taip pat turi būti įtraukti visi papildomi rekvizitai, pvz., būsenos ar užklausos parametrai. Dėl to kūrėjams, įpratusiems naudoti paprastesnę ankstesnių React Router versijų sintaksę, gali būti sunku.

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. importuoti { Redirect } iš 'react-router-dom';
– Ši eilutė importuoja „Redirect“ komponentą iš „react-router-dom“ bibliotekos.

2.
– Ši eilutė sukuria maršruto komponentą, kurio tikslus kelias yra „/old-path“.

3.
– Ši eilutė naudoja peradresavimo komponentą, kad peradresuotų iš „/old-path“ į „/new-path“.

Kaip galiu peradresuoti naudojant „React Router v6“.

v6

„React Router v6“ suteikia peradresavimo komponentą, kurį galima naudoti naudotojams peradresuoti iš vieno puslapio į kitą. Norėdami naudoti peradresavimo komponentą, turite jį importuoti iš paketo react-router-dom. Peradresavimo komponentas turi du rekvizitus: iš ir į. Rekvizitas „nuo“ yra dabartinio puslapio kelias, o „iki“ yra puslapio, į kurį norite nukreipti vartotojus, kelias. Pavyzdžiui, jei norite nukreipti vartotojus iš /homepage į /about, jūsų kodas atrodys taip:

importuoti { Redirect } iš 'react-router-dom';

Kas yra react maršrutizatorius?

„React Router“ yra „React“ maršruto parinkimo biblioteka, leidžianti kūrėjams kurti vieno puslapio programas su naršymu ir dinamišku, būsena pagrįstu maršruto parinkimu. Tai padeda sinchronizuoti vartotojo sąsają su URL, todėl vartotojams lengviau bendrinti ir pažymėti URL. „React Router“ taip pat teikia galingas funkcijas, tokias kaip tingus įkėlimas, maršruto apsauga ir vietos perėjimo tvarkymas.

Reaguoja maršrutizatorių tipai

„React Router“ yra „React“ maršruto parinkimo biblioteka, leidžianti kūrėjams kurti vieno puslapio programas su naršymu ir URL nukreipimu. Jame yra trijų tipų maršrutizatoriai: „BrowserRouter“, „HashRouter“ ir „MemoryRouter“.

BrowserRouter: šis maršruto parinktuvas naudoja HTML5 istorijos API, kad jūsų vartotojo sąsaja būtų sinchronizuota su URL. Jis naudojamas, kai programoje norite naudoti tikrus URL.

„HashRouter“: šis maršrutizatorius naudoja URL maišos dalį (ty #), kad jūsų vartotojo sąsaja būtų sinchronizuota su URL. Jis naudojamas, kai nenorite naudoti tikrų URL arba kai reikia suderinamumo su senesnėmis naršyklėmis, kurios nepalaiko HTML5 istorijos API.

MemoryRouter: šis maršruto parinktuvas saugo vietų istoriją atmintyje ir nesąveikauja su naršyklės adreso juosta ir nekuria tikrų URL. Tai naudinga testavimo tikslais arba aplinkoje, kur nepageidautina naudoti tikrus URL (pvz., serverio pusės atvaizdavimas).