Клијентски рутинг у React Router-у

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

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

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

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 код нас захтевао само једном при почетном учитавању и при наредним кликовима захтева на сервер већ нема.

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