Indeksowa trasa w React Router

W tej lekcji dowiemy się, czym są indeksowe trasy.

Na początek zwróćmy uwagę na jedną rzecz. Kiedy jesteśmy na stronie głównej, po prawej stronie widzimy po prostu pusty ekran. Dlatego, że żadna z tras potomnych nie pasuje do adresu /, a nie powiedzieliśmy, co wyświetlić w tym przypadku. W takiej sytuacji, aby nie wyświetlać pustej strony, można zastosować indeksową trasę - taką trasę potomną, która nie ma ścieżki, a jej element jest wyświetlany w rodzicielskim Outlet wtedy, gdy nie pasuje żadna z zestawu tras potomnych. Za pomocą takich tras można umieszczać jakieś informacje, statystyki lub cokolwiek podobnego. Podobnie jak w przypadku zwykłych, można ich używać do ładowania danych.

Stwórzmy plik index.jsx w folderze routes, a w nim komponent Index:

export default function Index() {
	return (
		<div>
			<p>Cześć, React Router!</p>
			<p>To jest aplikacja dla moich produktów :)</p>
		</div>
	);
}

Teraz przejdźmy do main.jsx i zaimportujmy tam nasz komponent Index:

import Index from './routes/index';

A pierwszym elementem w tablicy children dodajmy obiekt, gdzie właściwość index ustawiona jest na true, a jako element do wyświetlenia będzie nasz komponent Index:

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

Weź aplikację utworzoną przez ciebie w zadaniach do poprzedniej lekcji. Korzystając z materiałów lekcji, dodaj indeksową trasę z adresem strony głównej z jakimś tekstem.