Maršrutēšana klienta pusē React Router

Šajā nodarbībā mēs apskatīsim svarīgu vienlapas (SPA) lietotņu sastāvdaļu - maršrutēšanu klienta pusē. Šāda maršrutēšana ļauj mums atjaunināt URL pārlūkprogrammā bez papildu pieprasījumiem pēc dokumenta no servera.

Palaidiet lietotni, ko mēs izveidojām iepriekšējā nodarbībā. Atveriet izstrādātāju rīku paneli un tajā cilni 'Tīkls' (Network Chrome). Pēc katra klikšķa uz mūsu saitēm mēs redzam katru reizi pieprasījumu pēc document. Tas ir, mēs katru reizi lūdzam serverim ielādēt mums document.

Tagad izmantosim React Router priekšrocības, lai atbrīvotos no šādiem pieprasījumiem. Lai to izdarītu, atveram root.jsx mūsu lietotnes un aizstājam a atzīmi ar komponentu Link. Lai sāktu, pievienosim tā importu:

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

Tagad aizstājam a atzīmes ar atribūtu href. Tā vietā koda gabals:

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

Mums tagad būs šāds kods:

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

Atkal atveram cilni 'Tīkls' izstrādātāju rīku panelī, adreses joslā iestatām saknes ceļu un atsvaidzinām lapu. Tagad klikšķinam uz saitēm un redzam, ka document tika pieprasīts tikai vienu reizi sākotnējās ielādes laikā un turpmāko klikšķu laikā pieprasījuma uz serveri vairs nav.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, īstenojiet tajā maršrutēšanu klienta pusē, pārveidojot savas saites, kā aprakstīts nodarbībā.