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:

export 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:

import 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:

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

Oldingi dars uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, bosh sahifa manzili uchun biron bir matn bilan indeks marshrutini qo'shing.