React Router'до индекстик маршрут

Бул сабакта биз индекстик маршруттар деген эмне экенин билебиз.

Алгач бир нерсене көңүл буралы. Башкы бетте турганда, оң жагында биз жөнөкөй бош экранды көрөбүз. Бул себеби, балдар маршруттарынын эч бири / дарегине дал келбейт, жана бул учурда эмне көрсөтүү керектигин биз айтпадык. Мындай учурда, бош бетти көрсөтпөө үчүн, биз индекстик маршрутту колдонсок болот - бул жолу жок болгон балдар маршруту, анын элементи ата-энесинин Outletинде көрсөтүлөт, ал учурда балдардын топтомунан эч бири дал келбегенде. Мындай маршруттарды колдонуп, кандайдыр бир маалыматты, же статистиканы, же дагы башка ушинтип нерселерди жайгаштыра аласыз. Кадимки учурдагыдай эле, аларды маалымат жүктөө үчүн колдонсо болот.

Келгиле, routes папкасында index.jsx файлын түзөлү, жана анда 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 /> },

Өткөн сабактагы тапшырмаларда түзгөн колдонмоңузду алыңыз. Сабактын материалдарын пайдаланып, кандайдыр бир текст менен башкы беттин дарегине индекстик маршрут кошуңуз.