React Router'a Başka Bir Rota Ekleme

Ana sayfaya giden ve ürünler için bağlantıların bulunduğu kök rotamız var. Şimdi, bağlantılardan birine tıklandığında bir hata ekranı yerine ilgili ürünün sayfasının görüntülenmesi için başka bir rota daha ekleyelim.

İlk olarak, önceki derslerde yaptığımız uygulamamızı açalım ve routes klasörü içinde product.jsx dosyasını oluşturalım. İçinde Product adlı bir bileşen oluşturalım:

function Product() {}

export default Product;

Şimdi Product bileşeninin içinde, name, cost ve amount özelliklerine sahip bir product nesnesi oluşturalım. Şimdilik bunlar sabit değerler olacak:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Ve ürün sayfasında sırasıyla adını, maliyetini ve miktarını göstereceğiz:

return (
	<div>
		<h2>Ürün Sayfası</h2>
		<p>Ad: {product.name}</p>
		<p>Maliyet: {product.cost}</p>
		<p>Miktar: {product.amount}</p>
	</div>
);

Product bileşenini main.jsx dosyasına içe aktarmayı unutmayalım:

import Product from './routes/product';

Ve son olarak, uygulamamıza hemen kök rotadan sonra başka bir rota daha ekleyelim. Yol olarak 'products/:productId' belirleyelim, görüntülenecek öğe olarak da Product bileşenimiz var:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Şimdi uygulamayı başlatalım, bağlantılara tıklayalım ve bir hata sayfası yerine (şimdilik tüm bağlantılar için aynı olan) ürün sayfasında olduğumuzu görelim.

Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, benzer şekilde student.jsx dosyasını oluşturun, öğrenci sayfasında adının, soyadının, kayıt yılının ve uzmanlık alanının görüntülenmesini sağlayın. main.jsx dosyasına öğrenci sayfası için yeni bir rota ekleyin, path değerini 'students/:studentId' olarak ayarlayın. Bağlantılara tıkladığınızda artık öğrenci sayfasına gittiğinizden emin olun.