React Router'da İç İçe Rotalar

Bu derste, iç içe rotalar kavramıyla tanışacağız. Önceki derste yaptığımız uygulamayı başlatın. Bağlantılara tıkladığımızda, ürünün ayrı bir sayfasına gidiyoruz. Diyelim ki bu bize uygun değil ve daha net görmek için ürün listesi ve ürün sayfasının yan yana, aynı ekranda görüntülenmesini istiyoruz. Hadi bunu yapalım.

Bunun için main.jsx dosyasını açalım ve ürün sayfası için olan rotamızı kök rotanın alt rotası yapalım veya başka bir deyişle onu kök rotanın "içine" yerleştirelim. Bunun için rota nesnesinin bir başka özelliği olan children'ı kullanacağız:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Yine bağlantılara tıklıyoruz, ancak ürün listesinin sağında hiçbir şey görmüyoruz. Bunun nedeni, kök rotaya alt rotalarını nerede görüntülemek istediğimizi söylememiş olmamız.

Alt rotaların elemanlarını üst rota içinde oluşturmak için bize Outlet bileşeni yardımcı olacak. Hadi onu kütüphaneden kök rota dosyasına aktaralım:

import { Outlet } from 'react-router-dom';

Sonra onu bir #product div'i içine alalım ve kök rota için olan düzende, nav kapanış etiketinden sonra, sonuna ekleyelim ve tüm yapıyı bir #main div'i ile saralım:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Bağlantılara tıkladığımızda, artık hem ürün listesini hem de ürün sayfasını görüyoruz.

index.css dosyamıza biraz stil ekleyelim:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

Önceki dersteki görevde oluşturduğunuz uygulamayı alın. Ders materyallerinden faydalanarak, öğrenci sayfası için olan rotayı kök rotanın içine yerleştirin.

Şimdi de bağlantılara tıklandığında ekranda hem öğrenci listesinin hem de öğrenci sayfasının görüntülenmesini sağlayın.