Страна производа у претраживачу у 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 рутер:

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

Покренимо нашу апликацију. Сада можемо да изађемо на страницу са информацијама о било ком производу, кликом на дугме за преглед. Покушајте сада да додате нови производ и погледајте информације о њему на засебној страници кликом на дугме за преглед. Такође сада, да бисмо се вратили на списак производа довољно је кликнути на 'Products' у менију са леве стране. Будући на различитим страницама, погледајте како се мења URL у адресној линији претраживача.

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

У фајлу StudentsList.jsx унесите у код измене за dispStudents, као што је показано на часу.

Учините да линк 'Students' у левом менију води на страницу са списком студената. Проверите да ли све ради.

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