React Router-ում կլիենտի կողմի երթուղավորում
Այս դասում մենք կդիտարկենք միէջ (SPA) հավելվածների կարևոր բաղադրիչը` կլիենտի կողմի երթուղավորումը: Նման երթուղավորումը մեզ թույլ է տալիս թարմացնել URL-ը բրաուզերում առանց սերվերից փաստաթղթի լրացուցիչ հարցումների:
Գործարկեք այն հավելվածը, որը մենք ստեղծել էինք
նախորդ դասին: Բացեք մշակողի վահանակը և
դրա մեջ 'Ցանց' ներդիրը (Network for Chrome):
Մեր հղումների վրա յուրաքանչյուր սեղմումից հետո մենք
ամեն անգամ տեսնում ենք հարցում 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-ի համար հարցումը
կատարվել է միայն մեկ անգամ սկզբնական բեռնման ժամանակ,
իսկ հաջորդող սեղմումների դեպքում սերվեր հարցում
այլևս չկա:
Վերցրեք ձեր կողմից ստեղծված հավելվածը նախորդ դասերին առաջադրանքներում: Օգտագործելով դասի նյութերը, իրականացրեք դրանում կլիենտի կողմի երթուղավորում, վերափոխելով ձեր հղումները, ինչպես նկարագրված է դասում:
