Lahendatud: kuidas ümber suunata React Routeris v6

Viimane uuendus: 09/11/2023
Autor: JavaScript SourceTrail

React Router v6 ümbersuunamisega seotud peamine probleem on see, et ümbersuunamiste süntaks on varasematest versioonidest oluliselt muutunud. Versioonis 6 tuleb ümbersuunamiskomponenti kasutada element ja to prop peavad olema varustatud objektiga, mis sisaldab atribuuti teenimi. Lisaks tuleb sellele objektile lisada kõik täiendavad rekvisiidid, nagu oleku- või päringuparameetrid. See võib raskendada arendajate jaoks, kes on harjunud kasutama React Routeri varasemate versioonide lihtsamat süntaksit.

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. importige { Redirect } kataloogist "react-router-dom";
– See rida impordib ümbersuunamiskomponendi teegist react-router-dom.

2.
– See rida loob marsruudi komponendi, mille täpne tee on "/vana tee".

3.
– See rida kasutab ümbersuunamiskomponenti, et suunata ümber asukohast „/old-path” saidile „/new-path”.

Kuidas ma saan Reacti ruuteris v6 ümber suunata

v6

React Router v6 pakub ümbersuunamiskomponenti, mida saab kasutada kasutajate ühelt lehelt teisele suunamiseks. Ümbersuunamiskomponendi kasutamiseks peate selle importima paketist react-router-dom. Ümbersuunamise komponendil on kaks rekvisiidi: from ja to. Rekvisiit "alates" on praeguse lehe tee ja "kuni" on selle lehe tee, kuhu soovite kasutajad ümber suunata. Näiteks kui soovite suunata kasutajad lehelt /homepage lehele /about, näeks teie kood välja järgmine:

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

Mis on reageerimisruuter?

React Router on Reacti marsruutimisteek, mis võimaldab arendajatel luua ühelehelisi rakendusi koos navigeerimise ja dünaamilise olekupõhise marsruutimisega. See aitab hoida kasutajaliidese URL-iga sünkroonis, muutes kasutajatel lihtsamaks URL-ide jagamise ja järjehoidjate lisamise. React Router pakub ka võimsaid funktsioone, nagu laisk laadimine, marsruudi kaitse ja asukoha ülemineku käsitlemine.

Ruuteri tüübid reageerivad

React Router on Reacti marsruutimisteek, mis võimaldab arendajatel luua ühelehelisi rakendusi koos navigeerimise ja URL-i marsruutimisega. See pakub kolme tüüpi ruutereid: BrowserRouter, HashRouter ja MemoryRouter.

BrowserRouter: see ruuter kasutab HTML5 ajaloo API-d, et hoida teie kasutajaliides URL-iga sünkroonis. Seda kasutatakse siis, kui soovite oma rakenduses kasutada tõelisi URL-e.

HashRouter: see ruuter kasutab URL-i räsiosa (st #), et hoida teie kasutajaliides URL-iga sünkroonis. Seda kasutatakse siis, kui te ei soovi kasutada päris URL-e või kui vajate ühilduvust vanemate brauseritega, mis ei toeta HTML5 ajaloo API-d.

MemoryRouter: see ruuter hoiab mällu asukohtade ajalugu ja ei suhtle brauseri aadressiribaga ega loo tõelisi URL-e. See on kasulik testimise eesmärgil või keskkondades, kus päris URL-ide kasutamine pole soovitav (nt serveripoolne renderdamine).

Seonduvad postitused: