React Router-ում կլիենտի կողմի երթուղավորում

Այս դասում մենք կդիտարկենք միէջ (SPA) հավելվածների կարևոր բաղադրիչը` կլիենտի կողմի երթուղավորումը: Նման երթուղավորումը մեզ թույլ է տալիս թարմացնել URL-ը բրաուզերում առանց սերվերից փաստաթղթի լրացուցիչ հարցումների:

Գործարկեք այն հավելվածը, որը մենք ստեղծել էինք նախորդ դասին: Բացեք մշակողի վահանակը և դրա մեջ 'Ցանց' ներդիրը (Network for Chrome): Մեր հղումների վրա յուրաքանչյուր սեղմումից հետո մենք ամեն անգամ տեսնում ենք հարցում document-ի համար: Այսինքն մենք ամեն անգամ հարցնում ենք սերվերին, որ այն բեռնի մեզ համար փաստաթուղթ:

Այժմ եկեք օգտվենք React Router-ի առավելություններից, որպեսզի ազատվենք նման հարցումներից: Դրա համար բացենք root.jsx մեր հավելվածի և փոխարինենք a նշումը Link բաղադրիչով: Սկզբից ավելացնենք դրա իմպորտը:

routes/root.jsximport { Outlet, Link } from 'react-router-dom';

Այժմ փոխարինենք a նշումները href ատրիբուտով: Կոդի հետևյալ հատվածի փոխարեն.

routes/root.jsx<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Այժմ մենք կունենանք հետևյալ կոդը.

routes/root.jsx<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Կրկին բացեք 'Ցանց' ներդիրը մշակողի վահանակում, հասցեի տողում սահմանեք արմատային ուղին և թարմացրեք էջը: Այժմ սեղմեք հղումների վրա և տեսնում ենք, որ document-ի համար հարցումը կատարվել է միայն մեկ անգամ սկզբնական բեռնման ժամանակ, իսկ հաջորդող սեղմումների դեպքում սերվեր հարցում այլևս չկա: