Ինդեքսային երթուղի React Router-ում

Այս դասում մենք կիմանանք, թե ինչ են ինդեքսային երթուղիները:

Սկսելու համար եկեք ուշադրություն դարձնենք մի բանի: Երբ գտնվում ենք գլխավոր էջում, ապա աջ կողմում մենք տեսնում ենք պարզապես դատարկ էկրան: Պատճառն այն է, որ ոչ մի դուստր երթուղի չի համապատասխանում / հասցեին, իսկ այս դեպքում ինչ ցուցադրել մենք չենք նշել: Նման դեպքում, դատարկ էջ չցուցադրելու համար կարող է կիրառվել ինդեքսային երթուղի - այնպիսի դուստր երթուղի, որը չունի ուղի, և դրա տարրը ցուցադրվում է ծնող Outlet-ում այն ժամանակ, երբ համապատասխան չէ դուստր երթուղիներից ոչ մեկը: Նման երթուղիների օգնությամբ կարելի է տեղադրել որևէ տեղեկություն, կամ վիճակագրություն, կամ էլ ինչ-որ նման բան: Ինչպես սովորականների դեպքում, դրանք կարող են օգտագործվել տվյալներ բեռնելու համար:

Եկեք ստեղծենք index.jsx ֆայլը routes պանակում, և դրա մեջ Index կոմպոնենտը:

export default function Index() {
	return (
		<div>
			<p>Ողջույն, React Router!</p>
			<p>Սա իմ ապրանքների համար նախատեսված հավելված է :)</p>
		</div>
	);
}

Այժմ անցնենք main.jsx և ներմուծենք այնտեղ մեր կոմպոնենտը Index:

import Index from './routes/index';

Իսկ children զանգվածի առաջին տարրի տեղում ավելացնենք օբյեկտ, որտեղ index հատկությունը սահմանված է true, և որպես տարր ցուցադրման համար կլինի մեր կոմպոնենտը Index:

{ index: true, element: <Index /> },

Վերցրեք ձեր կողմից նախորդ դասի առաջադրանքներում ստեղծված հավելվածը: Օգտագործելով դասի նյութերը, ավելացրեք ինդեքսային երթուղի գլխավոր էջի հասցեով՝ ինչ-որ տեքստով: