Индексни маршрут у 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 /> },

Узмите апликацију, коју сте направили у задацима претходне лекције. Користећи се материјалом лекције, додајте индексни маршрут са адресом почетне странице са неким текстом.