React Router-da Musteri Terfinde Marşrutlaşdırma

Bu dersde biz birsehifeli (SPA) proqramların mühüm terkib hissesi - musteri terfinde marşrutlaşdırmanı araşdıracayıq. Belə marşrutlaşdırma bizə brauzerde URL-i servere elave sened sorğusu olmadan yenilemeye imkan verir.

Keçen dersde yaratdığımız proqramı işe salın. Developer panelini açın ve onun içinde 'Şəbəkə' (Chrome üçün Network) vərəqini. Linklerimize her klikden sonra biz her defe sened üçün sorğu görürük. Yəni biz her defe serverden bizim üçün senedi yüklemesini isteyirik.

Gelin indi React Router-un üstünlüklerinden bele sorğulardan xilas olmaq üçün istifade edek. Bunun üçün proqramımızın root.jsx faylını açıb a teqini Link komponenti ile deyişek. Evvelce onun importunu elave edek:

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

Indi ise href atributu olan a teqlerini deyişek. Kod parçası yerine:

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

Artıq bizim aşağıdakı kodumuz olacaq:

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

Yeniden developer panelinde 'Şəbəkə' vərəqini açın, ünvan setrinde kök yolu set edib sehifeni yenileyin. Indi linklere klikleyin ve görün ki, sened yalnız bir defe - ilkin yüklemede sorğulanıb ve sonrakı kliklerde artıq servere sorğu yoxdur.

Evvelki derslerin tapşırıqlarında yaratdığınız proqramı götürün. Dersin materiallarından istifade ederek, orada musteri terfinde marşrutlaşdırmanı heyata keçirin, linklerinizi derste olduğu kimi deyişerek.