React Router-da Indeks Marşrutu

Bu dərsdə biz indeks marşrutlarının nə olduğunu öyrənəcəyik.

Əvvəlcə gəlin bir şeyə diqqət edək. Ana səhifədə olduğumuz zaman sağ tərəfdə boş bir ekran görürük. Bunun səbəbi heç bir alt marşrutun / ünvanına uyğun gəlməməsidir, və bu halda nə göstərməli olduğumuzu deməmişik. Belə bir vəziyyətdə, boş səhifə göstərməmək üçün indeks marşrutu tətbiq edə bilərik - bu, yoluna malik olmayan və heç bir alt marşrut ünvana uyğun gəlmədiyi zaman elementinin valideyn Outlet-də göstərilən bir alt marşrutdur. Belə marşrutlardan istifadə edərək hər hansı məlumat, və ya statistik, və ya buna bənzər başqa bir şey yerləşdirə bilərik. Adi marşrutlarda olduğu kimi, onlar məlumat yükləmək üçün də istifadə edilə bilər.

Gəlin routes qovluğunda index.jsx faylı yaradaq və onun içində Index komponentini yaradaq:

export default function Index() {
	return (
		<div>
			<p>Salam, React Router!</p>
			<p>Bu, mənim məhsullarım üçün bir tətbiqdir :)</p>
		</div>
	);
}

İndi main.jsx faylına keçək və orada Index komponentimizi import edək:

import Index from './routes/index';

Və children massivindəki ilk element kimi index xassəsi true olaraq təyin edilmiş və göstəriləcək element kimi Index komponentimiz olan bir obyekt əlavə edək:

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

Əvvəlki dərsin tapşırıqlarında yaratdığınız tətbiqi götürün. Dərs materiallarından istifadə edərək, ana səhifə üçün bəzi mətnlər olan bir indeks marşrutu əlavə edin.