Redux-də Brauzerdə Məhsul Səhifəsi

Keçən dərsdə biz məhsul üçün ayrı bir səhifə etdik. İndi bizə elə etmək lazımdır ki, istənilən düyməni kliklədikdə bizim səhifə brauzerdə görünsün.

Başlamaq üçün ona görünəcəyi ünvanı təyin edək. Marşrutları təyin etdiyimiz App.jsx faylını açaq və children-ə daha bir uşaq marşrut əlavə edək (ProductPage.jsx-i import etməyi unutmayın). Yolu və çıxaracağımız komponenti göstərək:

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

İndi gəlin products qovluğundakı ProductsList.jsx faylını açaq və dispProducts üçün kodu bir az dəyişək. İndi bizdə hər bir məhsul haqqında tam məlumat olan ayrı bir səhifə var. Deməli, məhsul siyahısında biz yalnız məhsulun adını və qısaldılmış təsvir mətnini göstərəcəyik. Həmçinin biz naviqasiya elementi kimi router kitabxanasından Link əlavə edəcəyik, klikləndikdə məhsul səhifəsinə keçid olacaq. Həmçinin məhsulları ayırmaq üçün div-ə product-excerpt sinifi əlavə edək. İndi bizim dispProducts üçün kod belə olacaq:

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>
))

Gəlin Link-i import edək:

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

Və index.css faylında link-btn və product-excerpt sinifləri üçün stil əlavə edək:

.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;
}

Nəhayət, gəlin sol menyuda olan, məhsul siyahısı səhifəsinə aparan linki də işlək hala gətirək, beləliklə biz ona istənilən başqa yerdən daxil ola bilərik. Bunun üçün root.jsx faylımızı açaq və bu kod sətirini əvəz edək:

<a>Products</a>

Bununla:

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

Həmçinin React router üçün kitabxanadan NavLink-i import etməyi unutmayaq:

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

Tətbiqimizi işə salaq. İndi biz hər hansı məhsul haqqında məlumat səhifəsinə baxmaq düyməsini klikləməklə çıxa bilərik. İndi yeni məhsul əlavə etməyə cəhd edin və onun haqqında məlumatı ayrı səhifədə baxmaq düyməsini klikləməklə yoxlayın. Həmçinin indi, məhsul siyahısına qayıtmaq üçün sol menyudakı 'Products'-ə klikləmək kifayətdir. Müxtəlif səhifələrdə olarkən, brauzerin ünvan sətrində URL-in necə dəyişdiyinə baxın.

Tələbələrlə olan tətbiqinizi açın. App.jsx faylında tələbə səhifəsi üçün daha bir uşaq marşrut yaradın.

StudentsList.jsx faylında dispStudents üçün koda dərsdə göstərildiyi kimi dəyişikliklər edin.

Sol menyudakı 'Students' linkinin tələbələrin siyahısı səhifəsinə aparmasını təmin edin. Hər şeyin işlədiyini yoxlayın.

Hal-hazırda olduğunuz səhifədən asılı olaraq brauzerin ünvan sətrindəki dəyərin necə dəyişdiyinə baxın.