React Router'da İndeks Rota

Bu derste, indeks rotaların ne olduğunu öğreneceğiz.

Öncelikle bir şeye dikkat edelim. Ana sayfadayken, sağ tarafta sadece boş bir ekran görüyoruz. Bunun nedeni, alt rotalardan hiçbirinin / adresiyle eşleşmemesi ve bu durumda ne gösterileceğini söylememiş olmamız. Bu gibi durumlarda, boş bir sayfa göstermemek için indeks rota kullanılabilir - yolu olmayan ve hiçbir alt rota eşleşmediğinde, öğesinin üst Outlet içinde gösterildiği bir alt rota. Bu tür rotalar, herhangi bir bilgi, istatistik veya benzeri şeyleri yerleştirmek için kullanılabilir. Normal rotalarda olduğu gibi, veri yüklemek için de kullanılabilirler.

Hadi routes klasöründe bir index.jsx dosyası oluşturalım ve içinde Index adlı bir bileşen oluşturalım:

export default function Index() {
	return (
		<div>
			<p>Merhaba, React Router!</p>
			<p>Bu, benim ürünlerim için bir uygulamadır :)</p>
		</div>
	);
}

Şimdi main.jsx dosyasına gidelim ve oraya Index bileşenimizi içe aktaralım:

import Index from './routes/index';

Ve children dizisindeki ilk öğe olarak, index özelliği true olarak ayarlanmış ve gösterilecek öğe olarak Index bileşenimizin olduğu bir nesne ekleyelim:

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

Önceki dersteki görevlerde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, ana sayfa adresinde herhangi bir metin bulunan bir indeks rota ekleyin.