Индексен маршрут в React Router

В този урок ще научим какво представляват индексните маршрути.

За начало нека обърнем внимание на едно нещо. Когато сме на началната страница, отдясно виждаме просто празен екран. Това е защото нито един от дъщерните маршрути не отговаря на адреса /, а какво да извеждаме в този случай не сме казали. В такъв случай, за да не показваме празна страница, може да се използва индексен маршрут - такъв дъщерен маршрут, който няма път, и неговият елемент се показва в родителския Outlet тогава, когато не отговаря нито един от набора от дъщерни маршрути. С помощта на такива маршрути може да се поставя някаква информация, или статистика, или още нещо подобно. Както в случая с обикновените, те могат да се използват за зареждане на данни.

Нека създадем файл index.jsx в папката routes, а в него компонент 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 /> },

Вземете приложението, създадено от вас в задачите към предишния урок. Използвайки материалите от урока, добавете индексен маршрут с адрес на началната страница с някакъв текст.