Maršroutinimas kliento pusėje React Router

Šioje pamokoje apžvelgsime svarbų vieno puslapio (SPA) programų komponentą - maršroutinimą kliento pusėje. Toks maršroutinimas leidžia mums atnaujinti URL naršyklėje be papildomų dokumento užklausų iš serverio.

Paleiskite programą, kurią kūrėme ankstesnėje pamokoje. Atidarykite kūrėjo skydelį ir jame skirtuką 'Tinklas' (Network for Chrome). Po kiekvieno paspaudimo mūsų nuorodomis mes matome kiekvieną kartą užklausą dėl document. Tai yra mes kiekvieną kartą prašome serverio mums įkelti document.

Panaudokime React Router pranašumus dabar, kad atsikratytume tokių užklausų. Tam atidarykime root.jsx mūsų programos ir pakeiskime a žymėjimo žymę į Link komponentą. Pirmiausia pridėkime jo importą:

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

Dabar pakeiskime a žymes su atributu href. Vietoj kodo gabaliuko:

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

Dabar turėsime tokį kodą:

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

Vėl atidarykite skirtuką 'Tinklas' kūrėjo skydelyje, adreso eilutėje nustatykite šakninį kelią ir atnaujinkite puslapį. Dabar spustelėkite nuorodas ir pamatysite, kad document buvo užklaustas tik vieną kartą pradinio įkėlimo metu ir vėlesniais paspaudimais užklausos į serverį nebėra.

Paimkite programą, kurią sukūrėte užduotyse ankstesnėms pamokoms. Pasinaudodami pamokos medžiaga, įgyvendinkite joje maršroutinimą kliento pusėje, perdarydami savo nuorodas, kaip aprašyta pamokoje.