Redux'ta Tarayıcıda Ürün Sayfası

Önceki derste, ürün için ayrı bir sayfa yaptık. Şimdi yapmamız gereken, herhangi bir butona tıklandığında sayfamızın tarayıcıda görünmesini sağlamak.

Başlangıç olarak, görüntüleneceği bir adres atanmasını sağlayalım. Rotaları tanımladığımız App.jsx dosyasını açalım ve children içine bir tane daha alt rota ekleyelim (ProductPage.jsx dosyasını import etmeyi unutmayın). Yolu ve görüntülenecek bileşeni belirleyelim:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

Şimdi products klasöründeki ProductsList.jsx dosyasını açalım ve dispProducts için kodu biraz değiştirelim. Artık her ürün için tam bilginin olduğu ayrı bir sayfamız var. Bu demek oluyor ki, ürün listesinde sadece ürün adını ve kısaltılmış açıklama metnini göstereceğiz. Ayrıca, tıklandığında ürün sayfasına gidilebilecek, router kütüphanesinden bir navigasyon elemanı olan Link bileşenini bir bağlantı olarak ekleyeceğiz. Ürünleri ayırmak için div'e product-excerpt sınıfını da ekleyelim. Artık dispProducts için kodumuz şu şekilde olacak:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Link bileşenini import edelim:

import { Link } from 'react-router-dom'

Ve index.css dosyasına link-btn ve product-excerpt sınıfları için stiller ekleyelim:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

Son olarak, soldaki menüdeki, ürün listesi sayfasına götüren bağlantıyı da, başka bir yerden de ulaşılabilmesi için çalışır hale getirelim. Bunun için root.jsx dosyamızı açalım ve şu kod satırını değiştirelim:

<a>Products</a>

Şu şekilde değiştirelim:

<NavLink to="/products" end>
	Products
</NavLink>

Ayrıca NavLink bileşenini React router kütüphanesinden import etmeyi unutmayalım:

import { Outlet, NavLink } from 'react-router-dom'

Uygulamamızı çalıştıralım. Artık görüntüleme butonuna basarak herhangi bir ürün hakkındaki bilgi sayfasına gidebiliriz. Şimdi yeni bir ürün eklemeyi deneyin ve görüntüleme butonuna basarak ayrı sayfadaki bilgilerine bakın. Ayrıca artık, ürün listesine dönmek için soldaki menüden 'Products' seçeneğine tıklamak yeterli. Farklı sayfalardayken, tarayıcınızın adres çubuğundaki URL'nin nasıl değiştiğine bakın.

Öğrenci uygulamanızı açın. App.jsx dosyasında, öğrenci sayfası için bir tane daha alt rota oluşturun.

StudentsList.jsx dosyasında, derste gösterildiği gibi dispStudents için koda değişiklikleri yapın.

Sol menüdeki 'Students' bağlantısının, öğrenci listesi sayfasına gitmesini sağlayın. Her şeyin çalıştığını kontrol edin.

Şu anda bulunduğunuz sayfaya bağlı olarak, tarayıcının adres çubuğundaki değerin nasıl değiştiğine bakın.