React Router-da indeks marshruti

Ushbu darsda biz indeks marshrutlari nima ekanligini bilib olamiz.

Boshlash uchun keling, bir narsaga e'tibor beraylik. Biz bosh sahifada turganda, o'ng tomonda shunchaki bo'sh ekranni ko'ramiz. Buning sababi, hech bir pastki marshrut manzil / bo'yicha mos kelmaydi va bu holatda nima chiqarish kerakligini aytmadik. Bunday holatlarda, bo'sh sahifani ko'rsatmaslik uchun indeks marshruti - yo'li bo'lmagan, shunday pastki marshrutdan foydalanish mumkin, uning elementi hech qanday pastki marshrutlar to'plamidan biri mos kelmaganida ota Outlet da ko'rsatiladi. Bunday marshrutlar yordamida ma'lumotlar, statistikalar yoki shunga o'xshash narsalarni joylashtirish mumkin. Oddiylarida bo'lgani kabi, ularni ma'lumotlarni yuklash uchun ishlatish mumkin.

Keling, routes papkasida index.jsx faylini yarataylik va unda Index komponentini yarataylik:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Salom, React Router!</p>
      <p>Bu mening mahsulotlarim uchun ilova :)</p>
    </div>
  );
}

Endi main.jsx ga o'tamiz va u erga Index komponentimizni import qilamiz:

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

Va children massividagi birinchi element sifatida, index xususiyati true ga o'rnatilgan va ko'rsatish uchun element sifatida bizning Index komponentimiz bo'lgan ob'ektni qo'shamiz:

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