Страница на производ во прелистувачот во Redux

На претходната лекција направивме посебна страница за производот. Сега треба да направиме така што при кликнување на кое било копче нашата страница да се појавува во прелистувачот.

За почеток ќе и доделиме адреса на која ќе се прикажува. Да ја отвориме датотеката App.jsx, во која ги дефинираме рутите, и ќе додадеме во children уште една детална рута (не заборавајте да го импортирате ProductPage.jsx). Ќе ја означиме патеката и компонентата што ќе ја прикажуваме:

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

Сега да ја отвориме ProductsList.jsx во папката products и малку да го смениме кодот за dispProducts. Сега имаме посебна страница со целосни информации за секој производ. Значи во листата на производи ќе прикажуваме само името на производот и скратениот текст на описот. Исто така ќе додадеме линк во вид на навигациски елемент Link од библиотеката на рутерот, при кликнување на кој може да се дојде до страницата на производот. Ќе додадеме и div со класа product-excerpt, за да ги разделиме производите. Сега нашиот код за dispProducts ќе изгледа вака:

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:

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

И ќе додадеме стилови за класите link-btn и product-excerpt во index.css:

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

На крај, да ја направиме функционална и врската во левото мени, што води до страницата со листа на производи, за да можеме да дојдеме до неа од кое било друго место. За ова да ја отвориме нашата root.jsx и да ја замениме оваа линија код:

<a>Products</a>

Со следнава:

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

Исто така да не заборавиме да го импортираме NavLink од библиотеката за React router:

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

Да ја стартуваме нашата апликација. Сега можеме да излеземе на страницата со информации за кој било производ, со притискање на копчето за преглед. Обидете се сега да додадете нов производ и погледнете ги информациите за него на посебна страница со притискање на копчето за преглед. Исто така сега, за да се вратите на листата на производи доволно е да кликнете на 'Products' во менито лево. Наоѓајќи се на различни страници, погледнете како се менува URL во адресната лента на прелистувачот.

Отворете ја вашата апликација со студенти. Во датотеката App.jsx создадете уште една детална рута за страницата на студентот.

Во датотеката StudentsList.jsx внесете во кодот промени за dispStudents, како што е прикажано на лекцијата.

Направете така што врската 'Students' во левото мени да води до страницата со листа на студенти. Проверете дали сè работи.

Погледнете како ќе се менува вредноста во адресната лента на прелистувачот, во зависност од тоа на која страница се наоѓате во моментов.