Индексен пат во 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 /> },

Земете ја апликацијата, креирана од вас во задачите од претходната лекција. Користејќи ги материјалите од лекцијата, додадете индексен пат со адреса на главната страница со некој текст.