React Router-da müşderi tarapynda ýol ýörediş

Bu sapakda biz bir-sahypaly (SPA) programmalaryň möhüm bölegine - müşderi tarapynda ýol ýöredişe seredýäris. Şeýle ýol ýörediş bizä brauzerde URL-i serwerden goşmaça soraglar etmezden täzelemäge mümkinçilik berýär.

Öňki sapakda döredýän programmanyzy işlediň. Öndüriji paneli we onuň içindäki 'Ulgam' (Chrome üçin Network) goşmasyny açyň. Her bir çyzykmyza basanymyzdan soň biz her gezek document üçin soragy görýäris. Ýagny, her gezek serwerden bize document ýüklemegini sorayarys.

Indi şeýle soraglardan halas bolmak üçin React Router-yň artykmaçlyklaryndan peýdalanyň. Bunuň üçin programmanyzyň root.jsx faýlyny açyp, razmetkanyň a tegini Link komponentine çalyşyň. Ilki bilen ony import edeliň:

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

Indi href atributy bilen a teginleri çalyşyň. Kod böleginiň ýerine:

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

Indi bizde aşakdaky kod bolmaly:

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

Öndüriji paneldäki 'Ulgam' goşmasyny ýene açyň, adres setirinde esasy ýoly düzüň we sahypany täzeläň. Indi çyzyklara basyp görüň, document-iň diňe ilkinji ýüklenende soralandygyny we soňky basyşlarda serwere sorag edilmedikdigini görýärsiňiz.

Öňki sapaklaryň görewnamalary üçin döreden programmanyňyzy alyň. Sapagyň materiallaryny ulanyp, onda müşderi tarapynda ýol ýöredişi amala aşyryň, sapakda görkezilişi ýaly çyzyklaryňyzy üýtgediň.