Маршрутизатсия дар тарафи муштарӣ дар 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 танҳо як бор дархост шуд вақте ки бори аввал бор карда мешуд, ва баъд аз кликҳои минбаъда дигар дархост ба сервер вуҷуд надорад.

Барномаеро, ки шумо дар вазифаҳои дарсҳои гузашта сохтед, гиред. Бо истифода аз маводҳои дарс, дар он маршрутизатсия дар тарафи муштарӣ, ро амалӣ намоед, пайвандҳои худро тавре ки дар дарс шарҳ дода шуд, тағир диҳед.