Маршрутизация на клиентска страна в 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 беше поискан
само веднъж при първоначалното зареждане
и при следващи кликвания вече няма заявка към
сървъра.
Вземете приложението, създадено от вас в задачите към предишните уроци. Използвайки материалите от урока, реализирайте в него маршрутизация на клиентска страна, преработвайки вашите връзки, както е описано в урока.
