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

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

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

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

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

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

main.jsximport Index from './routes/index';

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

main.jsx{ index: true, element: <Index /> },