Marsruutimine kliendipooles React Routeris

Selles õppetükis käsitleme olulist üheleherakenduste (SPA) komponenti - marsruutimist kliendipooles. Selline marsruutimine võimaldab meil uuendada brauseris URL-i ilma lisadokumendi päringuteta serverist.

Käivitage rakendus, mida me lõime eelmisel õppetükil. Avage arenduspaan ja selles vahekaart 'Võrgu' (Network for Chrome). Pärast iga kliki meie linkidele me näeme iga kord päringut dokumendile. See tähendab, et me palume serverilt iga kord meile alla laadida dokumendi.

Kasutame nüüd React Routeri eeliseid, et sellistest päringutest lahti saada. Selleks avame root.jsx meie rakendusest ja asendame silt a märgistusest komponendiga Link. Et alustada, lisame selle importimise:

import { Outlet, Link } from 'react-router-dom';

Nüüd asendame sildid a atribuudiga href. Koodijupi asemel:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Meil on nüüd järgmine kood:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Avame uuesti vahekaardi 'Võrgu' arenduspaanil, seame aadressiribale juurtee ja värskendame lehte. Nüüd klõpsame linkide peal ja näeme, et dokumenti päriti meilt ainult üks kord alglaadimisel ja järgnevatel klõpsudel päringut serverisse enam ei ole.

Võtke rakendus, mille te lõite ülesannetes eelmistele õppetükkidele. Kasutades õppetüki materjale, rakendage selles marsruutimine kliendipooles, ümber tehes teie lingid, nagu on kirjeldatud õppetükis.