Рутирање на клиентска страна во React Router

На оваа лекција ќе разгледаме важна компонента на едностраните (SPA) апликации - рутирање на клиентска страна. Ваквото рутирање ни овозможува да ја ажурираме URL-адресата во прелистувачот без дополнителни барања на документот од серверот.

Стартувајте ја апликацијата што ја создадовме на претходната лекција. Отворете ја панелот за разработчики и во него јазичето 'Мрежа' (Network за Chrome). После секој клик на нашите врски ние го гледаме секој пат барањето за document. Тоа значи дека ние секој пат го бараме серверот да ни го вчита document-от.

Ајде сега да ги искористиме предностите на React Router, за да се ослободиме од ваквите барања. За да го направиме ова, ќе го отвориме root.jsx на нашата апликација и ќе го замениме тегот a од markup-от со компонентата Link. За почеток да го додадеме неговиот import:

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

Сега да ги замениме теговите a со атрибутот href. Наместо парчето код:

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

Сега ќе го имаме следниот код:

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

Повторно отворете го јазичето 'Мрежа' на панелот за разработчики, во адресната лента поставете го коренскиот пат и освежете ја страницата. Сега кликнете на врските и видете дека document-от ни се бараше само еднаш при почетното вчитување и при следните кликови барање до серверот веќе нема.

Земете ја апликацијата што ја создадовте во задачите за претходните лекции. Користејќи ги материјалите од лекцијата, имплементирајте во неа рутирање на клиентска страна, преработијќи ги вашите врски, како што е опишано во лекцијата.